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

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

这在一定程度上与事件传播有关。简而言之，这意味着单击事件不仅会在被单击的元素上注册，还会在该元素的任何父元素或祖先元素上注册。

所以如果你点击一个DIV，事件也会被注册到BODY上，因为DIV是在BODY内部的。抽象地说，如果厨房是犯罪现场，那么厨房所在的公寓也是犯罪现场。一个在另一个里面。

可以通过防止传播来防止这种情况 - 在 jQuery 中，通过运行自动传递给事件处理程序的 evt 对象的 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 就绪处理程序内运行。

该代码监听对任何元素的点击。如果它已注册在按钮上，则会切换菜单的可见状态。如果是菜单外部的元素，则菜单将被隐藏。 (如果在后一种情况下，菜单已经隐藏，则这将不起作用。)

Here's a working JS Fiddle这演示了该方法。