每当我在菜单外单击或使用 jQuery 单击任何菜单项时隐藏切换

Question

我在网页左侧创建了一个切换开关 window。我想在单击菜单中的任何锚标记或单击菜单栏外部时隐藏切换 window。

我已经在 JSFiddle 中上传了我的代码。相关代码如下。

$(window).load(function(){
    $("[data-toggle]").click(function() {
        var toggle_el = $(this).data("toggle");
        $(toggle_el).toggleClass("open-sidebar");
    });
});

Answer 1

这应该有效。该脚本主要检查单击的元素是否是切换图标并切换 class，如果不是 - 它会删除它（不再切换以避免在不需要时显示菜单）。

$(document).mouseup(function (e) {
    var toggle_el = $("[data-toggle]");
    var container = $("[data-toggle]").data("toggle");

    if (!toggle_el.is(e.target)) // if the target of the click isn't the container...
    {        
        if($(container).hasClass("open-sidebar")) {
            $(container).removeClass("open-sidebar"); 
        }
    }
    else {
        $(container).toggleClass("open-sidebar");
    }
});

每当我在菜单外单击或使用 jQuery 单击任何菜单项时隐藏切换

Hide a toggle whenever I click outside the menu or click on any menu item using jQuery

jquery

html

css

toggle