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

Close pop-up menu by clicking anywhere on the page

本文关键字：位置 弹出式菜单 任何 单击      更新时间：2023-09-26

我有以下代码:

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

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

如果你的菜单有一个'menu'类，这将会有帮助。

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

下面是一个例子:https://jsfiddle.net/okbpxb14/

没有工作示例…

你可以这样做:

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

addEventListener到window时显示。当窗口被点击时，运行切换功能

removeEventListener从window隐藏时。

这仍然存在的一个问题是，如果菜单被单击，它仍然会隐藏，所以你需要添加逻辑，如果菜单被单击到return;

更新在查看您的实时示例....代替window，你可以使用'.blog-content'

相关文章：