Question

我有一个手风琴式的菜单，该菜单上悬停工作正常状态，但我想改变对点击，而不是...

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#nav > li').hover(
     function() { 
      if ($('> span',this).attr('class') != 'active') { 
       $('#nav li ul').slideUp(); 
       $('span',this).next().slideToggle(); 
       $('#nav li span').removeClass('active'); 
       $('> span',this).addClass('active'); 
      } 
     }, 
     function() { 
      $('#nav li ul').slideUp(); 
      $('#nav li a').removeClass('active'); 
     }); 
    }); 
</script> 

但仅仅更换悬停与点击不起作用，任何意见大加赞赏我是个设计师，所以我的JS是相当差:)

Answer 1

.hover(fucntion() {}, function()); // .hover() accept two function .click(function() {}); // only accept one

尝试

$('selector').on('click', function() { 
    if($(this).hasClass('active')) { 
     // do something if this has class active 
    } 
    else { 
     // do something if not. 
    } 

}); 

Answer 2

试试这个，

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#nav > li').click(function() { 
      if ($('> span', this).attr('class') != 'active') { 
       $('#nav li ul').slideUp(); 
       $('span', this).next().slideToggle(); 
       $('#nav li span').removeClass('active'); 
       $('> span', this).addClass('active'); 
      } 
     }).mouseout(function (e) { 
      if ($(e.target).parents().find('#' + $(this).attr('id')).length) return; 
      $('#nav li ul').slideUp(); 
      $('#nav li span').removeClass('active'); 
     }); 
    }); 

</script> 

HTML：

<li id="t1"><span>Nav item click me 1</span> 
       <ul> 
        <li><a href="#">Sub link 1</a></li> 
        <li><a href="#">Sub link 2</a></li> 
        <li><a href="#">Sub link 3</a></li> 
        <li><a href="#">Sub link 4</a></li> 
       </ul> 
      </li> 
      <li id="t2"><span>Nav item click me 2</span> 
       <ul> 
        <li><a href="#">Sub link 1</a></li> 
        <li><a href="#">Sub link 2</a></li> 
        <li><a href="#">Sub link 3</a></li> 
        <li><a href="#">Sub link 4</a></li> 
       </ul> 
      </li> 

当然