Bootstrap关闭响应式菜单“单击”

86

在“产品”上，点击我将白色div向上滑动（如附件所示）。在响应式（移动设备和平板电脑）中，我想自动关闭响应式导航栏，仅显示白色栏。

我试过了：

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

还尝试了：

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

它确实有效。但是，在桌面大小上，它也被称为“菜单”，它在菜单上缩小了一秒钟。

有任何想法吗？

在此处输入图片说明

javascript  html  css  twitter-bootstrap 
— 用户名
source
您可以张贴一些HTML吗？您是否还在使用Bootstrap的隐藏功能？还是您正在尝试实现自己的东西？
— 克里斯·霍伦贝克
我想，我只是想做一些简单的事情。我只想在单击“产品”时关闭导航栏
— user1040259 2013年
如果您不想自己尝试在这里比较所有这些解决方案，请从此答案中编辑＃1。
— caw 2014年
我建议在此处向下滚动一点，然后查看@LukeTillman答案。完美运行，无需jQuery。:)
— das Keks '16

Answers:

102

我已将其与动画配合使用！

html菜单：

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

将导航中所有元素上的click事件绑定到折叠菜单（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');
     });
 });
— 莫尔韦
source
3
如果不是所有a要素：您只需打电话给$("#nav-main").collapse('hide');
— Ankit Jain 2014年
@mollwe当它具有下拉菜单时，您有解决方案吗？我做了一个jsfiddle尝试，但即使菜单也无法打开。jsfiddle.net/Y3H92
— clankill3r 2014年
@ clankill3r在我看来似乎缺少对bootstrap.js的引用，因此该菜单将无法正常工作。我更新了您的jsfiddle：jsfiddle.net/Y3H92/1
— mollwe 2014年
@mollwe和您的小提琴对我来说根本无法关闭菜单。
— clankill3r 2014年
1
对不起@ clankill3r的回复！但是迟到总比不到好。jsfiddle.net/mollwe/Y3H92/5
— mollwe 2014年
136

您无需在bootstraps折叠选项已包含的内容中添加任何额外的javascript。相反，就像在导航栏切换按钮上所做的那样，只需在菜单列表项中包括数据切换和数据目标选择器即可。因此，对于您的“产品”菜单项，它看起来像这样

<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中，我无法使用可见/隐藏类。代替hidden-xs使用d-none d-sm-block和代替visible-xs使用d-block d-sm-none。

— 杰克·泰勒
source
14
当导航栏未显示为“响应”菜单时，会导致闪烁和奇怪的内容。
— Florian
5
这是正确的实现。无需自定义jQuery。
— larrylampco 2014年
我删除了对此答案和以前的评论的不赞成（也是因为该视频不再起作用）。由于我对闪烁的评论仍然适用于原始答案，因此进行了几次投票，并且您的“编辑”已明确标记为我看不到删除它并重写历史记录的理由。当时是有效的，因此您做出了相应的反应。读过您答案的人会看到“编辑”，并且知道您对此有所改善...
— Florian 2015年
您宁愿复制所有链接只是为了避免一行完整记录的JavaScript？getbootstrap.com/javascript/#collapse-methods。
— Sander Garretsen '16
1
无需将data-toggleanddata-target属性添加到每个li元素，您可以将其添加到父元素ul或div标签。
— 杰里米（Jeremy Quick）
40

我认为您到处都是工程。

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

编辑：要照顾子菜单，请确保其切换锚点上具有drop-toggle类。

    $(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();
            });
    });
— 本通尼
source
3
应该是公认的答案。其他的则经过过度设计，并且在无响应的显示器上闪烁。
— rybo111
3
这可能是被接受的答案，但它没有考虑子菜单，并且实际上破坏了它们。尽管有一些缺点，但其他一些“过度设计”的解决方案也确实考虑了这一点。以下添加内容将解决此问题：$（function（）{$（'。navbar-collapse ul li a：not（.dropdown-toggle）'）。click（function（）{$（'。navbar-toggle：可见'）.click（）;}）;}）;
— Ed Bishop
太棒了，谢谢您的编辑！
— 洪通尼2014年
1
我认为touchstart太多了，单击效果很好。当您从按钮“启动”时，它如何响应滑动？
— 霍通尼2014年
37

我真的很喜欢Jake Taylor的想法，不需要额外的JavaScript并利用Bootstrap的折叠触发功能。我发现您可以通过data-target略微修改选择器以包括in该类来解决菜单不在折叠模式时出现的“闪烁”问题。所以看起来像这样：

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

我没有使用嵌套的下拉菜单/菜单进行测试，所以是YMMV。

— 卢克·蒂尔曼
source
3
这对我来说也是最好的实现。
— huijing 2015年
出于某种原因，我的ScrollSpy无法使用此方法，但是可以与Jake Taylor的方法配合使用。
— 2015年
迄今为止最好和最简单的答案。
— 迪亚
一直试图使非闪烁的崩溃工作一段时间，但这是迄今为止最简单，最优雅的解决方案。谢谢！
— McVenco
9

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

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
— vidriduch
source
对我来说最好的答案，谢谢。
— MoxxiManagarm
5

我假设您根据Bootstrap示例和所有内容，在这样的一行中定义了导航区域

<div class="nav-collapse collapse" >

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

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

我也添加了<body>工作。不能说我已经描述了它或其他任何东西，但是对我来说似乎是一种享受...直到您单击UI的随机位置以打开菜单，所以效果就不那么理想了。

DK

— 道格拉斯·“ DK”·克努森
source
正确的解决方案依赖于Bootstrap的内置功能；没有其他jQuery或javascript。以及所有最简单的解决方案。这应该是公认的答案。
— Sergi Papaseit
4

这有效，但不设置动画。

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
— 用户名
source
8
令人惊讶的是，没有配置选项，因为单击关闭将是更好的默认设置。
— bchesley13年
3

该解决方案在台式机和移动设备上都能很好地工作。

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
— bp002
source
使用navbar-id作为数据目标时，对我有用：桌面尺寸时
— wutzebaer
很丑，难以接受！
— 烛台
2

只是为了阐明user1040259的解决方案，将此代码添加到$（document）.ready（function（）{}）;中； 

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

正如他们所提到的，这不会使移动动起来……但是它确实会关闭项目选择上的导航栏。

— 查尔斯·A
source
2

对于那些与此同时使用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>
— 凯尔
source
看起来您将指令放在类attr中，对吗？
— Gringo Suave 2015年
在链接函数内部，以下应该起作用。element.on（'click'，function（）{scope.vm.isCollapsed =！scope.vm.isCollapsed;}）;
— JimmyBob
2

这应该可以解决问题。

需要bootstrap.js。

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

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

这与向导航菜单标签添加'data-toggle =“ collapse”'和'href =“ yournavigationID”'属性具有相同的作用。

— 朱西·耶尔维（JussiJärviö）
source
您能否更详细地解释答案？
— Blunderfest 2015年
那不是jQuery吗？同时使用jQuery和Angular是不是很不好的做法？
— AlxVallejo
1

我使用了mollwe函数，尽管我添加了2个改进：

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

b）如果您单击可见的Web内容，则也隐藏该下拉列表。

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

            });
— Arco Voltaico
source
1

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

我给了NavButton：

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

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

结果是：如果“可见”按钮，则“单击” ... ...：如果您使用Bootstrap的“全屏视图”（宽度超过940px），则不会出现错误。

问候拉尔夫

PS：它与IE9，IE10和Firefox 25兼容。没有检查其他对象-但我看不到问题:-)

— 拉尔夫D.
source
1

这对我有用。我已经完成了类似的工作，当我单击菜单按钮时，即时通讯添加或删除了“输入”类，因为默认情况下，通过添加或删除该类，切换功能是有效的。'e.stopPropagation（）'是通过bootstrap（我猜）来停止默认动画，您也可以使用'toggleClass'代替添加或删除类。

$（'＃ChangeToggle'）。on（'click'，函数（e）{

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

    });
— 刚见
source
0

您使用 

ul.nav {
    display: none;
}

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

— 克里斯
source
2
问题是，当“正常”显示而不是在响应菜单中时，这会隐藏导航。
— Florian
0

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

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

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

— 金斯利·伊约玛
source
0

如果菜单html是 

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

在导航切换中添加“ in”类，并从切换中删除。检查是否打开了响应菜单，然后执行关闭切换。

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});
— 阿默·沙扎德（Aamer Shahzad）
source
0

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

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})
— 超级模特
source
-1 
$('.navbar-toggle').trigger('click');
— 阿奇卜
source
我不明白为什么这不是正确的答案？每当您单击该单击事件上的任何菜单链接时，您都可以切换菜单，我认为这是正确的方法，因为我没有更改打开或关闭菜单的默认行为。
— 阿奇布（Aqib）
-1

没有任何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>
展开摘要

— 基兰维
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.