0

我有带有注销按钮等的小型下拉配置文件菜单。我需要在单击按钮时显示菜单，并在单击页面或按钮上的任何位置时将其隐藏。

<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');
    }
});

但是当我结合这些方法时它不起作用。所以当我点击按钮打开菜单时，什么也没发生。

对不起我的英语:) 提前感谢您的帮助。

4

2 回答 2

2

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

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

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

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

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-ready 处理程序中运行。

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

这是一个演示该方法的有效 JS Fiddle 。

于 2013-09-01T19:54:15.623 回答
1

尝试这个：

$(function() {

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

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


});
于 2013-09-01T20:05:16.183 回答