Question

我正在使用此Bootstrap示例工作一个站点，侧栏导航中有一个简单的幻灯片。

http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/#

略有修改，所以我有一个菜单打开按钮：

// Opens the sidebar menu
 $("#menu-toggle").click(function (e) {
    e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
 });

关闭菜单的按钮：

// Closes the sidebar menu
   $("#menu-close").click(function (e) {
       e.preventDefault();
       $("#sidebar-wrapper").toggleClass("active");
   });

我想添加功能，所以如果我点击侧边栏以外的任何地方它会关闭。到目前为止，我有这个：

// Close the menu on click outside of the container  
$(document).click(function (e) {

            var container = $("#sidebar-wrapper");

            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
                && event.target.id !== "menu-toggle")  // for the functionality of main toggle button
            {
                container.removeClass("active");
            }
     });

但它似乎以这种方式删除了“活跃”类。

最好的问候。

Answer 1

所以解决方案应该是，如果你点击容器内的任何地方，点击处理程序应该什么也不做，只是返回。但如果点击在容器外面，那么它应该关闭它。

下面是可能对您有帮助的点击处理程序代码。

 $(document).click(function(e) {
      var node = e.target;
       // loop through ancestor nodes to check if the click is inside container.
       // If yes then return from the handler method without doing anything 
       while(node.parentNode) {
         if (node === container) {
           return;
         }
         node = node.parentNode;
       }

       container.removeClass('active')
     });

Answer 2

试试这个

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

所以基本上它正在做的是，如果e是要切换类的元素，如果点击的e也是那个，那么该类将不会切换，否则它将会。

Answer 3

您可以使用递归功能，从侧边栏菜单检查cointainer中单击的元素是否存在：

    function hasElement(node, element) {
        return node == element 
            || (node.childNodes || []).length && Array.from(node.childNodes)
                .filter(x => x.nodeType == 1)
                .some(x => hasElement(x, element));
    }

    $('body').click(function (event) {
        var container = Array.from($("#sidebar")); //Add another containers that would be clicked wihtout close sidebar
        var exists = container.some(node => hasElement(node, event.target));
        if (!exists)
            //TODO Close sidebar here...
    });

单击外侧关闭侧边栏

3 个答案: