1

2つの項目にサブメニューが含まれているメニューがあるとします。ここにhtmlがあります。

         <div id="Menubar">
            <ul>
                <li><a href="#">About</a></li>
        <li><a href="#">Contact</a>
        <ul >
                        <li class="dropItem"><a href="#">By Mail</a></li>
                        <li class="dropItem"><a href="#">By Phone</a></li>         
                    </ul>                    
                </li>  
                <li><a href="#">Search</a></li> 
                <li><a href="#">Gallery</a>
                    <ul>
                        <li class="dropItem"><a href="#">Video</a></li>
                         <li class="dropItem"><a href="#">Audio</a></li> 
                        <li class="dropItem"><a href="#">Images</a></li>         
                        <li class="dropItem"><a href="#">Powerpoint</a></li>
                    </ul>
                </li>                                    
                <li><a href="#">News</a></li>                                                 
                <li><a href="#">Home</a></li>

            </ul>
        </div>

だからそれは次のようなものです：

について| お問い合わせ| 検索| ギャラリー| ニュース| 家

    -------            -------

    ByMail             Video

    ByPhone            Audio

                       Images

では、ulを含むliを選択して、ulを表示するにはどうすればよいですか。

私はこのようなことを試しました：

$(document).ready(function(){
        //start//
        var drop = $('#Menubar ul li');
        if(drop.children().last().is('ul')){
              mouseover:function(){
                  $(this).find('ul').fadeIn('normal');
              }
         });
        }


});

何か案は ？

4

2 に答える 2

2

これはどう？

$("#Menubar li > ul").parent().hover(function() {
    $(this).children("ul").stop().fadeIn();
}, function() {
    $(this).children("ul").fadeOut();
});​

デモ：http： //jsfiddle.net/ZhYDf/1/

セレクターの別のバリエーション：

$("#Menubar li:has(ul)").hover(function() {
    $(this).children("ul").stop().fadeIn();
}, function() {
    $(this).children("ul").fadeOut();
});​
于 2012-05-21T20:26:09.940 に答える
0 
  $(function(){

         $('#MenuBar li:has("ul")').each(function(){  //iterate over 'li' tags that contain a 'ul' tag
              var that = $(this),
                  sub  = that.find('ul');  //make vars from jquery objects
              that.hover(function(){ //bind hover to 'li' tag in iteration
                     sub.fadeIn();
              },function(){
                     sub.fadeOut(); 
              });
         });

  });
于 2012-05-21T20:20:38.117 に答える