Javascript парения/нажмите проблемы

Question

У меня есть Accordian стиль меню, который прекрасно работает на парении состояние, но я хотел бы, чтобы изменить к мыши вместо ...

<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>