jQuery添加类如果下拉菜单激活，否则删除类

Question

我有一个脚本，如果无序列表是可见的，如果是，它将添加一个类。我的问题是，这不是撤课。可能是一个小错误，不过还是感谢你的帮助。

HTML:

<div class="nav">
  <ul id="menu" class="menu">
    <li id="menu0"><a href="/page/">IT Solutions</a>
    <!-- dropdown -->
    <ul>
    <li><a href="#">dropdown link</a></li>
    <li><a href="#">dropdown link</a></li>
    <li><a href="#">dropdown link</a></li>
    <li><a href="#">dropdown link</a></li>
    <li><a href="#">dropdown link</a></li>
    <li><a href="#">dropdown link</a></li>
    </ul>
    <!-- end dropdown -->
    </li>
</div>

jQuery:

$('#menu li').live('mouseenter mouseleave', function(e) {    
  var element = $(this).find('ul');
  if ((element).is(':visible')) {
    $(this).addClass('hilight');
  }
  else {
    $(this).removeClass('hilight');
  }
}); 

我正在使用live，因为我不得不使用旧版本的jQuery。

Answer 1

这是你要找的吗?我猜你错过了子ul的切换，它导致is:visible总是为真。

http://jsfiddle.net/LR7t9/

$('#menu > li').live('mouseenter mouseleave', function(e) {    
  var element = $(this).find('ul');
   element.toggle();
   $(this).toggleClass('hilight');
}); 

你可以使用Hover作为mouseenter mouseleave的简写:-

http://jsfiddle.net/J8tkK/

$('#menu > li').live('hover', function(e) {    
  var element = $(this).find('ul');
   element.toggle();
   $(this).toggleClass('hilight');
}); 

Answer 2

我认为这是因为你需要循环遍历它们。试试这个:

$('#menu li').live('mouseenter mouseleave', function(){
    var el = $(this).find('ul'),
        len = el.length;
    for(var i=0; i<len; i++){
        if( el.eq(i).is(':visible') ){
            $(this).addClass('hilight');
        }
        else{
            $(this).removeClass('hilight');
        }
    }
});

还有，你的HTML是错误的。没有关闭第一个<ul>