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

Question

我在网页左侧创建了一个切换窗口。每当我点击菜单中的任何锚标签或在菜单栏外单击时，我都想隐藏切换窗口。

我已将代码上传到JSFiddle。相关代码如下。

http://jsfiddle.net/66db9vec/

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

Answer 1

这应该有效。该脚本基本上检查点击的元素是否为切换图标并切换该类，如果不是 - 它将其删除（不再切换以避免在不打算时显示菜单）。

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