Javascript 如何通过单击“外部”关闭导航栏？

我有一个Drupal 8.6.8站点，具有Bootstrap 3.3.7主题

我想在单击“外部”时关闭导航菜单。我尝试了以下代码：

(function ($) {
  'use strict';

  $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-first').length) {
      $('.navbar-collapse-first').collapse('hide');
    }
  });

  $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-second').length) {
      $('.navbar-collapse-second').collapse('hide');
    }
  });

}(jQuery));

它不起作用，如果我在导航菜单外单击，它不起作用。只有当我删除第二个或离开第二个并删除第一个时，此代码才起作用

如何在2菜单上应用此功能

更新：

我找到了答案：

(function ($) {
  'use strict';

  $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-first').length) {
      $('.navbar-collapse-first').collapse('hide');
    }
    if (!$(event.target).closest('#navbar-collapse-second').length) {
      $('.navbar-collapse-second').collapse('hide');
    }
  });

}(jQuery));

你试过这个吗：

    $(document).click(function (event) {
    if (!$(event.target).closest('#navbar-collapse-second, #navbar-collapse-second').length) {
      $('.navbar-collapse-second, .navbar-collapse-second').collapse('hide');
    }
  });

$（文档）。单击（函数（事件）{
if（！$（event.target）.closest（“#导航栏折叠秒，#导航栏折叠秒”）.length）{
$（'.navbar折叠秒，.navbar折叠秒'）.collapse（'hide'）；
}
});
您可以使用此功能

function OnwindowClick(elem , action){
    $(document).on('click',function(e){
        if (!$(elem).is(e.target) // if the target of the click isn't the container...
            && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
        {
            action();
        }
    });
}

像这样使用它

// OnwindowClick(elem , action) add the prevent elements in `elem` something like this
OnwindowClick('#navbar-collapse-first , #navbar-collapse-second', function(){
   $('.navbar-collapse-first, .navbar-collapse-second').collapse('hide');
});

注意事项：


无需使用
.closest（）
直接使用选择器

elem
是防止文档点击的元素


附加：您仍然需要将按钮添加到
元素中<代码>#导航栏先折叠，导航栏第二折叠，按钮1\u选择器，按钮2\u选择器

如何使用此功能的示例


$（文档）.ready（函数（）{
$（'button.clickable'）。在（'click'，function（）上{
$（this）.text（$（this）.text（）=='Like'？'Dislike'：'Like'）；
});
OnwindowClick（'按钮.可点击'，函数（）{
$（'button.clickable'）。淡出（400）；
setTimeout（函数（）{
$（'button.clickable'）.fadeIn（400）；
} , 5000);
});
});
WindowClick上的函数（元素、操作）{
$（文档）。在（'单击'）上，函数（e）{
if（！$（elem）.is（e.target）//如果单击的目标不是容器。。。
&&$（elem）.has（e.target）.length==0）/…或容器的后代
{
动作（）；
}
});
}

就像
Hello一样，将逻辑放在它自己的函数中是一个很好的方法<代码>窗口上的函数单击（元素，动作）

也可以进入

$（文档）.ready（函数（）{}）

。他们把它放在外面是一个特别的原因吗？@LebCit你可以在它工作的时候在任何地方使用它。。但是，由于它位于ready函数中，所以在解析整个DOM之后才会定义它。。你可以看看