html 引导程序:如何关闭打开的折叠导航栏时,点击菜单外?

3zwjbxry  于 2022-11-20  发布在  其他
关注(0)|答案(3)|浏览(171)

我希望在用户单击菜单外部(而不仅仅是导航栏元素外部)时关闭菜单。因为菜单中有更多折叠,所以此解决方案不适用于我:How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?当我在菜单外单击时菜单消失,但当我单击带有下拉菜单的链接时,整个菜单折叠。

<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="list-group panel">
            <a href="#submenu-1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Webshop</a>
            <ul class="collapse" id="submenu-1">
                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Industriële verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Promotionele verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Gelamineerde verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Enveloppen &verzend verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Medische verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Co-packing</a>
            </ul>
        </li>
    </ul>
ttcibm8c

ttcibm8c1#

如果未单击链接,则可以使用此选项折叠:******

$(document).click(function(e) {
    if (!$(e.target).is('a')) {
        $('.collapse').collapse('hide');        
    }
});
k2fxgqgv

k2fxgqgv2#

另一种选择是,您可以添加以下代码:

<script>
	$(document).ready(function(){
		$(".list-group ").hover(            
		function() {
			$('.collapse', this).stop( true, true ).slideDown("fast");
			$(this).toggleClass('open');        
		},
		function() {
			$('.collapse', this).stop( true, true ).slideUp("fast");
			$(this).toggleClass('open');       
		}
		);
	});
</script>

另一个例子:dtc-eng

bwitn5fc

bwitn5fc3#

以下是我的看法:

$(document).on('click', function(event){
  var $clickedOn = $(event.target),
      $collapsableItems = $('.collapse'),
      isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
      isLink = ($clickedOn.closest('a').length == 1),
      isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);

  if( (!isToggleButton && isLink) || isOutsideNavbar ) {
    $collapsableItems.each(function(){
      $(this).collapse('hide');
    });
  }
});

此解决方案可处理:

  • 单页网站/应用程序(也可用于多页)。
  • 点击:
  • .navbar-toggle元素(可以是<buttons><a>,它处理潜在内部元素(如<span><strong>等)上的点击)。
  • 在简单的<a>元素上(同样,它处理内部元素上的点击)。
  • 刚好在某个特定父节点(即.navbar)之外。
  • 多个可能是开放的可折叠(.collapse)元素(与它们在DOM中的位置不明显)。

您可以定制传递给jQuery的大多数选择器(document.collapse.navbar等)来满足您的需要,甚至可以添加更多的条件。

相关问题