Question

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

我试过了：

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

也尝试过：

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

它确实有效。然而，在桌面大小的情况下，它也会被调用并对菜单做一些时髦的事情，它会缩短一秒钟。

有什么想法吗？

enter image description here

Answer 1

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

<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/

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

编辑：在bootstrap v4.1.3中，我无法使用可见/隐藏类。而不是hidden-xs使用d-none d-sm-block而不是visible-xs使用d-block d-sm-none。

Answer 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');
     });
 });

修改为了使其更通用，我们可以使用以下代码段

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

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

Answer 4

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

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

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

Answer 5

只是为了完成，在Bootstrap 4.0.0-beta中使用 .show 为我工作......

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

Answer 6

这有效，但没有动画。

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

Answer 7

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

<div class="nav-collapse collapse" >

只需添加属性，例如在MENU按钮上

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

我也加入了<body>，工作了。不能说我已经对它进行了分析，但对我来说似乎是一种享受...直到你点击UI的随机点来打开菜单，所以不那么好。

DK

Answer 8

这个解决方案在桌面和移动设备上都做得很好。

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

Answer 9

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

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

Answer 10

只是拼出user1040259的解决方案，将此代码添加到$（document）.ready（function（）{}）;

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

正如他们所提到的，这并没有动画移动...但它确实关闭项目选择的导航栏

Answer 11

对于那些使用AngularJS和Angular UI路由器的人来说，这是我的解决方案（使用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>

Answer 12

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

我给了NavButton：

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

id / Identifier like：

 <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 Reguest。）

结果是：如果Button是“可见的”它被“点击”......所以：如果你使用Bootstrap的“全屏视图”（宽度超过940px），则没有错误。

问候拉尔夫

PS：它适用于IE9，IE10和Firefox 25.没有检查过其他人 - 但我看不到问题： - ）

Answer 13

这应该可以解决问题。

需要bootstrap.js。

示例=＆gt; http://getbootstrap.com/javascript/#collapse

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

这与将“data-toggle =”collapse“'和'href =”yournavigationID“'属性添加到导航菜单标签的功能相同。

Answer 14

我正在使用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');
                    }
                });

            });

Answer 15

这对我有用。我已经这样做了，当我点击菜单按钮时，即时添加或删除课程＆＃39; in＆＃39;因为通过添加或删除该类，默认情况下切换功能正常。＆＃39; e.stopPropagation（）＆＃39;是通过bootstrap停止默认动画（我猜）你也可以使用＆＃39; toggleClass＆＃39;代替添加或删除类。

$（＆＃39;＃ChangeToggle＆＃39;）。on（＆＃39;点击＆＃39;，功能（e）{

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

    });

Answer 16

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

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

单击[data-toggle =“offcanvas”]会将bootstrap的.hidden-xs添加到我的＃side-menu，这将隐藏侧边菜单内容，但如果增加窗口大小，将再次显示。

Answer 17

如果菜单html是

library(data.table)

DT1 <- data.table(
                  Part = c("A", "B", "C"),
                  Code = c(1, 3, 1),
                  PartTo = c(NA, "D", NA)
                  )

DT2 <- data.table(
                  Part = c("A", "B", "C"),
                  Info = c(1, 3, 1)
                  )

导航切换＆＃39;在＆＃39;从切换中添加和删除类。检查是否打开了响应式菜单，然后执行关闭切换。

DT2[DT1$Code == 3, Part := DT1$PartTo]

Answer 18

你小心使用

ul.nav {
    display: none;
}

默认关闭导航栏。请让我知道有人发现这个有用的

Answer 19

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

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

Answer 20

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

Answer 21

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

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

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

<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>

Bootstrap关闭响应菜单“点击”

21 个答案: