如何通过单击外部关闭导航栏?

时间:2019-02-10 23:41:14

标签: javascript jquery twitter-bootstrap navigation collapse

我有一个带有Bootstrap 3.3.7主题的Drupal 8.6.8网站

我希望在单击外部时关闭导航菜单。我尝试使用代码:

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

https://css-tricks.com/dangers-stopping-event-propagation/

它不起作用,如果我在导航菜单之外单击,则不会起作用。此代码仅在删除第二个或保留第二个并删除第一个的情况下有效。

如何在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));

2 个答案:

答案 0 :(得分:0)

您是否尝试过:


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

答案 1 :(得分:0)

您可以使用此功能

type

并像

一样使用它
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 .. elem

示例如何使用此功能

#navbar-collapse-first , #navbar-collapse-second , button1_Selector , button2_Selector
$(document).ready(function(){
  $('button.clickable').on('click' , function(){
    $(this).text($(this).text() == 'Like' ? 'Dislike' : 'Like');
  });
  
  OnwindowClick('button.clickable' , function(){
    $('button.clickable').fadeOut(400);
    setTimeout(function(){
      $('button.clickable').fadeIn(400);
    } , 5000);
  });
});


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