Question

我有一个脚本，查看无序列表是否可见，如果是，则会添加一个类。我的问题是，它不是删除课程。可能是一个noobie错误，虽然有所帮助。

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的切换，它的原因是：可见总是如此。

http://jsfiddle.net/LR7t9/

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

您可以使用悬停作为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>

如果下拉列表处于活动状态，则jQuery添加类，否则删除类

2 个答案: