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

これはあなたが探しているものですか？子 ul のトグルを逃したと思います。それにより、 is:visible が常に true になります。

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');
});
于 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 に答える