单击外部菜单以关闭jQuery

Question

因此，根据业务需求，我有一个单击显示的下拉菜单。将鼠标移开菜单后，该菜单将再次隐藏。但是现在我被要求将其保留在原处，直到用户单击文档上的任何位置。如何做到这一点？这是我现在所拥有的简化版本：$(document).ready(function() {  $("ul.opMenu li").click(function(){   $('#MainOptSubMenu',this).css('visibility', 'visible');  });  $("ul.opMenu li").mouseleave(function(){      $('#MainOptSubMenu',this).css('visibility', 'hidden');  });});<ul  class="opMenu">  <li id="footwo" class="">    <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>      <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">        <li>some</li>       <li>nav</li>       <li>links</li>       </ul>    </li></ul> 我尝试过这样的$('document[id!=MainOptSubMenu]').click(function()想法，认为它会触发菜单上没有的任何东西，但是没有用。

Answer 1

将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到窗口，该事件将停止传播到文档主体。

$('html').click(function() {

  //Hide the menus if visible

});

$('#menucontainer').click(function(event){

    event.stopPropagation();

});

Answer 2

答案是正确的，但它将添加一个侦听器，该侦听器将在您的页面上每次单击时触发。为了避免这种情况，您可以只添加一次侦听器：

$('a#menu-link').on('click', function(e) {

    e.preventDefault();

    e.stopPropagation();

    $('#menu').toggleClass('open');

    $(document).one('click', function closeMenu (e){

        if($('#menu').has(e.target).length === 0){

            $('#menu').removeClass('open');

        } else {

            $(document).one('click', closeMenu);

        }

    });

});

编辑：如果您要避免stopPropagation()使用初始按钮，可以使用此按钮

var $menu = $('#menu');

$('a#menu-link').on('click', function(e) {

    e.preventDefault();

    if (!$menu.hasClass('active')) {

        $menu.addClass('active');

        $(document).one('click', function closeTooltip(e) {

            if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {

                $menu.removeClass('active');

            } else if ($menu.hasClass('active')) {

                $(document).one('click', closeTooltip);

            }

        });

    } else {

        $menu.removeClass('active');

    }

});

Answer 3

如果您可以使用插件，那么我建议Ben Alman位于此处的clickoutside插件：

它的用法很简单：

$('#menu').bind('clickoutside', function (event) {

    $(this).hide();

});

希望这可以帮助。