Question

这是我的代码：

$("#menu li:not(:first-child)").click(function () {

        $(this).siblings().removeClass('active'); 
            $menu = $(this).find('ul');
            $othermenu = $(this).siblings().find('ul');
            if($othermenu.is(':visible') == true) {
                $othermenu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
            }
            if($menu.is(':visible') == false) {
                $(this).addClass('active');
                $menu.css({display:'block'}).animate({opacity:'1', easing:'easeOutQuad'}, 500);

            } else {
                $(this).removeClass('active');

                $menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});

        }
    });

使用此代码在点击菜单时显示/隐藏子菜单。我想改变，好像我点击外面的菜单那个时候我也想隐藏子菜单。像我这样的Html代码

<div id="menu" class="showmenubox submenucheck">
          <ul> <li><a href="#" >Home</a> </li>
            <li><a href="javascript:void(0);">About </a>
                    <ul ><li>
                        <a href="#"><strong>aaaa</strong></a>
                       <a href="#">bbb</a>
                        </li>
                      </ul></li>
            <li><a href="javascript:void(0);">Contact</a>
                        <ul><li>
                        <a href="#"><strong>aaaa</strong></a><a href="#">bbb</a>
                        </li>
                      </ul>
            </li>   </ul>   </div>

Answer 1

您想测试单击文档时单击的内容...

$(document).click(function (e) {
    var $container = $("#menu");
    if (!$container.is(e.target) // if the target of the click isn't the container...
        && $container.has(e.target).length === 0) // nor a descendant of the container
    {

        $container.find('.active ul').animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});

    }
});

http://jsfiddle.net/kW2Nb/

Answer 2

使用以下代码注释。

$("#menu li:not(:first-child)").click(function (e) {

    $(this).siblings().removeClass('active'); 
    $menu = $(this).find('ul');
    $othermenu = $(this).siblings().find('ul');
    if($othermenu.is(':visible') == true) {
        $othermenu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});
    }
    if($menu.is(':visible') == false) {
        $(this).addClass('active');
        $menu.css({display:'block'}).animate({opacity:'1', easing:'easeOutQuad'}, 500);

    } else {
        $(this).removeClass('active');

        $menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});

    }
    /**
    * Bind click event on document 
    * It will hide menu which is currently open and unbind click event on document
    * 
    */
    var me = $(this);

    $(document).click(function(e) {
        $menu.animate({opacity:'0', easing:'easeOutQuad'}, 500).css({display:'none'});                            
        $(document).unbind("click");
        me.removeClass('active');
    });

    $menu.click(function(e) {
        e.stopPropagation();
    });

    e.stopPropagation();
});

onclick外部菜单使用jquery隐藏子菜单

2 个答案: