4

我有一个脚本来查看无序列表是否可见，如果是，它将添加一个类。我的问题是，它没有删除课程。可能是一个新手错误，尽管帮助表示赞赏。

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。

4

2 回答 2

4

Is this what you are looking for? I guess you have missed out the toggling of the child ul and it causes is:visible to be always true.

http://jsfiddle.net/LR7t9/

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

You can use Hover as a short hand to mouseenter mouseleave:-

http://jsfiddle.net/J8tkK/

$('#menu > li').live('hover', function(e) {    
  var element = $(this).find('ul');
   element.toggle();
   $(this).toggleClass('hilight');
});
于 2013-04-30T14:52:18.427 回答
0

我认为这是因为您需要遍历它们。尝试这个：

$('#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>

于 2013-04-30T14:48:45.787 回答