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

时间:2012-05-21 20:15:01

标签: javascript jquery

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


});

任何想法?

2 个答案:

答案 0 :(得分:2)

这个怎么样?

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

DEMO: http://jsfiddle.net/ZhYDf/1/


选择器的另一个变体:

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

答案 1 :(得分: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(); 
              });
         });

  });