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内。抽象地说，如果厨房是犯罪现场，那么容纳厨房的公寓也是犯罪现场。一个在另一个里面。

通过运行自动传递给事件处理程序的stopPropagation()对象的evt方法，可以防止传播 - 在jQuery中。

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

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演示了这种方法。

Answer 2

试试这个：

$(function() {

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

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


});

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

2 个答案: