单击按钮时显示菜单，单击页面或按钮上的任意位置时隐藏菜单

Question

我有带有退出按钮等的下拉菜单配置文件小菜单。单击按钮时需要显示菜单，单击页面或按钮上的任意位置时也需要隐藏菜单。

<div id='menu'>
    <ul>
        <li class='has-sub'> <a class="testbutton" id="userButton" onclick="dropdown()" href="#">
                            <span id="buttonText">User name</span> <span id="triangleDown">&#9662;</span>
                        </a>

            <ul id="submenu">
                <li class='has-sub'><a href='#'><span>Change password</span></a>
                </li>
                <li class='has-sub'><a href='logout.php?action=0'><span>Logout</span></a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我用过JavaScript。 此时，仅当我单击配置文件按钮时，菜单才会显示为隐藏。 我也知道如何使用诸如document.ready之类的功能来启动功能。

我的无效代码：

function dropdown() {
    if ($('#submenu').css('visibility') == 'hidden') {
        $('#submenu').css('visibility', 'visible');
    } else {
        $('#submenu').css('visibility', 'hidden');
    }
};

$(document).click(function (event) {
    if ($('#submenu').css('visibility') == 'visible') {
        $('#submenu').css('visibility', 'hidden');
    }
});

但是，当我结合使用此方法时，它将无法正常工作。 因此，当我单击按钮以打开菜单时，什么也没发生。

对不起，我的英语:)预先感谢您的帮助。

Answer 1

这部分与事件传播有关。 简而言之，这意味着click事件不仅会在clicked元素上注册，还会在该元素的任何父元素或祖先元素上注册。

因此，如果您单击DIV，该事件也将在BODY上注册，因为DIV在BODY内部。 简而言之，如果厨房是犯罪现场，那么容纳该厨房的公寓也是犯罪现场。 一个在另一个里面。

这是通过防止传播来防止的-在jQuery中，通过运行自动传递给事件处理程序的evt对象的stopPropagation()方法来stopPropagation()这种情况的发生。

无论如何，您的情况都可以大大简化。

var menu = $('#menu'), but = $('#menu_button');
$(document).on('click', '*', function(evt) {
    evt.stopPropagation(); //<-- stop the event propagating to ancestral elements
    if ($(this).is(but))   //<-- on button click, toggle visibility of menu
        menu.toggle();
    else if (!$(this).closest(menu).length) //<-- on click outside, hide menu
        menu.hide();
});

假设：我假设切换按钮可通过选择器'#menu_button'定位。 根据需要更新。 此外，代码应在DOM就绪处理程序中运行。

该代码侦听对任何元素的点击。 如果在按钮上注册，则菜单的可见状态将被切换。 如果是菜单外的元素，则菜单被隐藏。 （在后一种情况下，如果菜单已经隐藏，则将无效。）

这是一个工作的JS小提琴 ，演示了该方法。

Answer 2

尝试这个：

$(function() {

    $('.test-button').click(function(event) {
        event.stopPropagation();
        $('#submenu').toggle();
    });

    $('body').click(function() {
        var submenu = $('#submenu');
        if(submenu.is(":visible")) {
            submenu.hide();
        }
    })


});