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> 

當然