引导关闭响应菜单“点击”答案

【问题标题】：Bootstrap close responsive menu "on click"引导关闭响应菜单“点击”
【发布时间】：2013-01-07 20:10:37
【问题描述】：

在“产品”上单击我向上滑动一个白色 div（如附件所示）。在响应式（手机和平板电脑）时，我想自动关闭响应式导航栏，只显示白条。

我试过了：

$('.btn-navbar').click();

也试过了：

$('.nav-collapse').toggle();

它确实有效。然而，在桌面尺寸中，它也被称为并对菜单做一些时髦的事情，它会缩小一秒钟。

有什么想法吗？

【问题讨论】：

你能发布一些 HTML 吗？您还使用 Bootstrap 来实现隐藏功能吗？或者你想实现自己的东西？
我只是想做一些简单的事情，我想。我只想在点击“产品”时关闭导航栏
如果你不想自己在这里比较所有这些解决方案，edit #1 from this answer 是你应该做的。
我建议在这里向下滚动一下，看看@LukeTillman 的回答。完美运行，无需 jQuery。 :)

标签： javascript html css twitter-bootstrap

【解决方案1】：

您不必在引导折叠选项中已包含的内容中添加任何额外的 javascript。相反，只需在菜单列表项中包含数据切换和数据目标选择器，就像使用导航栏切换按钮一样。因此，对于您的 Products 菜单项，它看起来像这样

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

然后您需要为每个菜单项重复数据切换和数据目标选择器

编辑！！！ 为了修复溢出问题并在此修复上闪烁，我添加了更多代码来修复此问题，但仍然没有任何额外的 javascript。这是新代码：

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/

这将使您的切换和目标选择器特定于屏幕尺寸，并消除较大菜单上的故障。如果有人仍然遇到故障问题，请告诉我，我会找到解决办法。谢谢

编辑：在引导程序 v4.1.3 和 v5.0 中，我无法使用可见/隐藏类。使用d-none d-sm-block 代替hidden-xs，使用d-block d-sm-none 代替visible-xs。

编辑：在 bootstrap v5 中，使用 data-bs-toggle 代替 data-toggle，使用 data-bs-target 代替 data-target。

【讨论】：

当导航不显示为“响应式”菜单时会导致闪烁和奇怪的东西。
我删除了我对这个答案的反对意见和我之前的评论（也是因为视频不再有效）。由于我关于闪烁的评论对于原始答案仍然有效，因此得到了一些支持，并且您的“编辑”已明确标记，我看不出有理由将其删除并重写历史记录。它在当时是有效的，你做出了相应的反应。阅读您的答案的人会看到“编辑”并知道您对此进行了改进...
您更喜欢复制所有链接只是为了避免一行完美记录的 javascript？ getbootstrap.com/javascript/#collapse-methods.
除了将data-toggle 和data-target 属性添加到每个li 元素之外，您还可以将其添加到父元素ul 或div 标记中。
@jrquick 这是真的..但就像我原来的答案一样，使用这种方法单击链接时，您仍然会在较大的屏幕尺寸上遇到故障。如果您找到了消除此问题的方法，请发布小提琴，我会相应地更新我的答案。

【解决方案2】：

我已经让它与动画一起工作了！

html 中的菜单：

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

在导航中的所有元素上绑定点击事件以折叠菜单（Bootstrap 折叠插件）：

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

编辑为了使其更通用，我们可以使用以下代码 sn-p

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

【讨论】：

如果不是所有a元素：你只需要调用$("#nav-main").collapse('hide');
@mollwe 当它有下拉菜单时你有解决方案吗？我做了一个 jsfiddle 来尝试，但即使是菜单也打不开。 jsfiddle.net/Y3H92
@clankill3r 在我看来，缺少对 bootstrap.js 的引用，因此菜单不起作用。我更新了你的 jsfiddle：jsfiddle.net/Y3H92/1
@mollwe 用你的小提琴，菜单对我来说根本不会关闭。
抱歉@clankill3r 回复晚了！但迟到总比没有好。 jsfiddle.net/mollwe/Y3H92/5

【解决方案3】：

我认为你是工程师。

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

编辑：要处理子菜单，请确保它们的切换锚点上有下拉切换类。

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

编辑 2：添加对手机触摸的支持。

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

【讨论】：

应该是公认的答案。其他的过度设计并在无响应的显示屏上闪烁。
这可能是公认的答案，但它没有考虑子菜单，实际上破坏了它们。其他一些“过度设计”的解决方案确实考虑到了这一点，尽管它们有缺点。以下添加将解决此问题： $(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { $('.navbar-toggle:可见').click(); }); });
太好了，感谢您的编辑！
我觉得touchstart有点过分，点击效果很好。当您从按钮“开始”时，它如何响应滑动？
这太完美了，谢谢！我已经把它变成了一个纯原版的 js 函数，我将它添加到了 click 事件中。 const closeMenu=e=>{if(document.getElementById(e).classList.contains("show")){document.getElementsByClassName("navbar-toggler")[0].click()}};

【解决方案4】：

我真的很喜欢 Jake Taylor 的想法，即无需额外的 JavaScript 并利用 Bootstrap 的折叠切换。我发现您可以通过稍微修改data-target 选择器以包含in 类来解决菜单未处于折叠模式时出现的“闪烁”问题。所以它看起来像这样：

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

我没有用嵌套的下拉菜单/菜单测试它，所以 YMMV。

【讨论】：

这对我来说也是最好的实现。
出于某种原因，我的 ScrollSpy 无法使用此方法，但可以正常使用 Jake Taylor 的方法。
迄今为止最好最简单的答案。
一直试图让非闪烁崩溃工作一段时间，但这是迄今为止最简单和优雅的解决方案。谢谢！

【解决方案5】：

为了完整起见，在 Bootstrap 4.0.0-beta 中使用 .show 为我工作...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

【讨论】：

【解决方案6】：

我假设你有这样一行定义导航区域，基于 Bootstrap 示例和所有

<div class="nav-collapse collapse" >

只需像在菜单按钮上一样添加属性

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

我也添加到<body>，工作正常。不能说我已经对其进行了概要分析，但对我来说似乎是一种享受……直到您单击 UI 的随机位置以打开菜单，所以不太好。

丹麦

【讨论】：

正确的解决方案依赖于 Bootstrap 的内置功能；没有额外的 jQuery 或 javascript。以及最简单的解决方案。这应该是公认的答案。

【解决方案7】：

这有效，但没有动画。

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

【讨论】：

这有点令人惊讶，因为点击关闭会是更好的默认设置。

【解决方案8】：

在 HTML 中，我在每个导航链接的 a 标记中添加了一个 nav-link 类。

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

【讨论】：

【解决方案9】：

此解决方案在桌面和移动设备上运行良好。

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

【讨论】：

在使用 navbar-id 作为数据目标时为我工作：
但在桌面大小时会给出丑陋的动画

【解决方案10】：

只是为了说明 user1040259 的解决方案，将此代码添加到您的 $(document).ready(function() {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

正如他们所提到的，这不会为移动设置动画......但它确实关闭了项目选择的导航栏

【讨论】：

【解决方案11】：

对于那些使用 AngularJS 和 Angular UI Router 的人，这是我的解决方案（使用 mollwe 的切换）。其中“.navbar-main-collapse”是我的“数据目标”。

创建指令：

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

使用指令：

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

【讨论】：

看起来你把指令放在类 attr 中，对吗？
在链接功能中，以下应该可以工作。 element.on('click', function () { scope.vm.isCollapsed = !scope.vm.isCollapsed; });

【解决方案12】：

这应该可以解决问题。

需要 bootstrap.js。

示例 => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

这与将 'data-toggle="collapse"' 和 'href="yournavigationID"' 属性添加到导航菜单标签的作用相同。

【讨论】：

你能详细解释一下答案吗？
这不是 jQuery 吗？同时使用 jQuery 和 Angular 通常不是不好的做法吗？

【解决方案13】：

我正在使用 mollwe 函数，虽然我添加了 2 个改进：

a) 如果点击的链接被折叠（包括其他链接），请避免关闭下拉菜单

b) 如果您点击可见的网页内容，也可以隐藏下拉菜单。

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

【讨论】：

【解决方案14】：

不是最新的线程，但我搜索了相同问题的解决方案并找到了一个（其他一些问题的混合）。

我给了导航按钮：

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

一个 id / 标识符，如：

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

不是最好的“创意”——但是：适合我！现在您可以检查按钮的可见性（使用 jquery），例如：

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

（注意：这只是一个代码片段！我在导航链接上使用了“onclick”事件！（启动 AJAX 请求。）

结果是：如果按钮是“可见的”，它就会被“点击”……所以：如果您使用 Bootstrap 的“全屏视图”（宽度超过 940 像素），则没有错误。

问候拉尔夫

PS：它适用于 IE9、IE10 和 Firefox 25。没有检查过其他人 - 但我看不到问题 :-)

【讨论】：

【解决方案15】：

这对我有用。我已经这样做了，当我单击菜单按钮时，我会添加或删除“in”类，因为通过添加或删除该类，默认情况下切换是有效的。 'e.stopPropagation()' 是通过引导停止默认动画（我猜）你也可以使用 'toggleClass' 代替添加或删除类。

$('#ChangeToggle').on('click', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

【讨论】：

【解决方案16】：

你可以使用

ul.nav {
    display: none;
}

这将默认关闭导航栏。请让我知道有人觉得这很有用

【讨论】：

问题是，这会在“正常”显示时隐藏导航，而不是在响应式菜单中。

【解决方案17】：

例如，如果您的可切换图标仅对超小型设备可见，那么您可以执行以下操作：

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

单击 [data-toggle="offcanvas"] 会将引导程序的 .hidden-xs 添加到我的 #side-menu 中，这将隐藏侧边菜单内容，但如果您增加窗口大小，它将再次可见。

【讨论】：

【解决方案18】：

$('.navbar-toggle').trigger('click');

【讨论】：

我不明白为什么这不是正确的答案？每当您单击该单击事件上的任何菜单链接时，您都可以切换菜单，我认为这是正确的方式，因为我没有更改打开或关闭菜单的默认行为。

【解决方案19】：

如果菜单 html 是

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

on nav toggle 'in' 类被添加并从切换中删除。检查是否打开了响应式菜单，然后执行关闭切换。

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

【讨论】：

【解决方案20】：

Tuggle Nav Close，IE 浏览器兼容答案，没有任何控制台错误。如果您使用的是引导程序，请使用此

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

【讨论】：

【解决方案21】：

没有任何 Javascript 的 Bootstrap 4 解决方案

将属性data-toggle="collapse" data-target="#navbarSupportedContent.show"添加到div <div class="collapse navbar-collapse">

确保在data-target 中提供正确的id

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show是为了避免在大分辨率下菜单闪烁

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

【讨论】：

【解决方案22】：

我找到了一个简单的解决方案。只需在导航栏链接上添加按钮的切换代码即可。在下面的例子中是代码data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"。

点击后会关闭菜单并点击链接

    <!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button --> 
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    
            <div class="collapse navbar-collapse nav-format-mobile" id="navbarTogglerDemo02">
              <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <!--https://stackoverflow.com/a/65365121/5763690-->
                <li class="nav-item">

<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" aria-current="page" [routerLink]="'about'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">About</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Services
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="why-us" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Overview</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="project" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For companies</a></li>
                    <li><a class="dropdown-item" [routerLink]="'services'" fragment="startups" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For Startups</a></li>
                    <li><a class="dropdown-item" [routerLink]="'/services'" fragment="ngos" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">For NGOs</a></li>
                  </ul>
                </li>
                <li class="nav-item">
<!--data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" from toggle button to nav item --> 
                  <a class="nav-link" [routerLink]="'products'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Products</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'career'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Career</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" [routerLink]="'contact'" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">Contact</a>
                </li>
              </ul>
            </div>

【讨论】：

【解决方案23】：

我在我的 Vue.js 3 应用程序中尝试了其他建议，但是我的 vue-router 路由器链接不再起作用。

如果菜单具有“显示”类，我创建了一个小功能来单击菜单切换。这在所有情况下都对我很有用。

<template>
...
<div
    id="navbarNavigation"
    class="collapse navbar-collapse"
  >
    <ul
      class="navbar-nav me-auto mb-2 mb-lg-0"
    >
      <li class="nav-item">
        <router-link
          :to="route.url"
          class="nav-link"
          @click="closeMenu('navbarNavigation')"
        >
          My route name
        </router-link>
      </li>
    </ul>
  </div>
...
</template>

<script>
setup (props) {
    const closeMenu = (id) => {
      const menuShown = document.getElementById(id).classList.contains('show')
      if (menuShown) {
        const menuToggle = document.getElementsByClassName('navbar-toggler')[0]
        menuToggle.click()
      }
    }

    return { closeMenu }
  }
</script>

【讨论】：

【解决方案24】：

对于正在寻找关于 Vue 3 router-link 和 Bootstrap 5 + data-bs-attributes 的解决方案的窥视者：

使用data-bs-attributes 直接在 Vue-router-link 上切换导航似乎不起作用 - 因此，如果尚未完成，您需要将每个导航链接包装在父元素中（ li 是显而易见的选择）并在该元素上应用相关的 data-bs-attributes。

简而言之 - 而不是这个：

<li class="nav-item">
  <router-link
    to="/galaxy"
    class="nav-link d-flex"
    data-bs-toggle="collapse"
    data-bs-target="#navbarCollapse.show"
  >
    <v-icon name="gi-galaxy" size="1" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>

使用这个：

<li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse.show">
  <router-link to="/galaxy" class="nav-link d-flex">
    <v-icon name="gi-galaxy" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>

【讨论】：