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

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/