Question

我有以下代码：

var toggleButton = $('.menu-toggle'),
timerDelay;
toggleButton.on("click", function() {
    var elem = $(this),
    menu = elem.siblings('ul'),
    parent = elem.parent(),
    parentParent = parent.parent(),
    pageH = $(window).height();
    elem.toggleClass('pressed');
    menu.stop(true);
    clearTimeout(timerDelay);
    if (menu.is('.scrollable')) {
        menu.css({"max-height": pageH - 80});
    }
    parent.toggleClass('showed');
    if (menu.is('.parent')) {
        parentParent.toggleClass('showed');
    }
    if (menu.is('.hidden')) {
        menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
    } else {
        menu.toggleClass('hidden showed');
        if (menu.is('.nodelay')) {
            menu.css({"height": 0, "padding": ""});
        } else {
            timerDelay = setTimeout(function() {
                menu.css({"height": 0, "padding": ""});
            }, 450);
        }
    }
});

这是弹出菜单的代码。问题是它需要单击特定按钮才能关闭它。每当用户点击页面上的任何位置时，我也会尝试将其关闭。

有办法吗？

也许我提供了错误的代码。这是另一部分：

$(document).click(function (e)
{
var container = $("#wrapper");

if (!container.is(e.target) && container.has(e.target).length === 0 &&      event.target.id!=="menu-toggle")
{
    container.addClass("toggled"); 
}
});

我能和它混在一起吗？

$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

Answer 1

没有一个有效的例子......

您可以这样做：

var toggleButton = $('.menu-toggle'),
    timerDelay;

toggleButton.on("click", toggleDisplay);

function toggleDisplay() {

    var elem = $(this),
        menu = elem.siblings('ul'),
        parent = elem.parent(),
        parentParent = parent.parent(),
        pageH = $(window).height();
    elem.toggleClass('pressed');
    menu.stop(true);
    clearTimeout(timerDelay);
    if (menu.is('.scrollable')) {
        menu.css({"max-height": pageH - 80});
    }
    parent.toggleClass('showed');
    if (menu.is('.parent')) {
        parentParent.toggleClass('showed');
    }
    if (menu.is('.hidden')) {
        menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
        $(window).addEventListener('click', toggleButton);
    } else {
        menu.toggleClass('hidden showed');
        if (menu.is('.nodelay')) {
            menu.css({"height": 0, "padding": ""});
        } else {
            timerDelay = setTimeout(function() {
                menu.css({"height": 0, "padding": ""});
            }, 450);
        }
        $(window).removeEventListener('click', toggleDisplay);
    }
}

展示时，{p> addEventListener到window。单击窗口时，运行切换功能。

<{1}}隐藏时

removeEventListener。

一个问题这仍然是如果点击菜单它仍会隐藏，所以如果单击菜单window

，则需要添加逻辑

更新在查看了您的实时示例后....您可以使用return;

而不是使用window

Answer 2

$(document).one("click",function() {
  if ($(".showed").is(":visible")) {
    $(".pressed").trigger("click");
  }
});

Answer 3

如果你的菜单有一个课程菜单，那么这会有所帮助。

$('.menu, .menu-toggle').on('click', function(e) {
    e.stopPropagation();
});

$('body').on('click', function(e) {
    if($('.menu').hasClass('showed')){
        //code to hide menu 
        // i have clicked the toggle button here since the logic to hide menu is not separate in your code
        toggleButton.click();
    }
});

以下是jsfiddle的示例： https://jsfiddle.net/okbpxb14/

单击页面上的任意位置关闭弹出菜单

3 个答案: