javascript - 将函数绑定到用作子菜单的无序列表

Question

假设我们有一个菜单，其中两个项目包含一个子菜单，这里是 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');
              }
         });
        }


});

有任何想法吗 ？

Answer 1

这个怎么样？

$("#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();
});​

Answer 2

  $(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(); 
              });
         });

  });