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

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