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

Question

在“产品”上点击后，我会弹出一个白色的 div（如附图所示）。当处于响应式状态（移动设备和平板电脑）时，我希望自动关闭响应式导航栏，仅显示白色栏。

我尝试过：

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

还尝试过：

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

它确实有效。但是在桌面尺寸下，它也被称为并对菜单进行了一些奇怪的调整，使其在短暂的时间内缩小。

有什么想法吗？

- user1040259

---

你能发布一些HTML代码吗？另外，你是在使用Bootstrap的隐藏功能吗？还是在尝试实现自己的功能？ - khollenbeck

我只是想做一些简单的事情。我只想在点击“产品”时关闭导航栏。 - user1040259

如果你不想自己尝试和比较所有这些解决方案，你应该做的是编辑#1来自这个答案。 - caw

我建议向下滚动一点，看看LukeTillman的答案。 它完美地工作且没有使用jQuery。 :) - das Keks

Answer 1

您无需为引导程序折叠选项中已包含的任何额外JavaScript添加任何内容。 相反，只需像在navbar-toggle按钮上一样，在菜单列表项上包含data-toggle和data-target选择器。 因此，对于您的“产品”菜单项，它应该像这样

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

那么您需要为每个菜单项重复使用data-toggle和data-target选择器

编辑！！！为了解决溢出问题和闪烁问题，我正在添加一些代码来修复这个问题，并且仍然没有任何额外的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和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 。

- Jake Taylor

---

当导航菜单未显示为“响应式”菜单时，会引起闪烁和奇怪的问题。 - Florian

我取消了对这个答案的踩和之前的评论（也因为视频已经无法播放）。由于我的有关闪烁的评论仍然适用于原始答案，得到了一些赞同，而你的“编辑”也被清楚地标记了，所以我不认为有必要删除它并重写历史。当时它是有效的，你做出了相应的反应。阅读你的答案的人会看到“编辑”，知道你已经改进了它... - Florian

这是一个非常好的解决方案，但复制导航链接并不是一个好主意。对我来说，在@luketillman改进之前的版本已经很好了，并且提供了相当干净和逻辑清晰的标记，而且不需要额外的js。 - TMMC

你可以将 data-toggle 和 data-target 属性添加到父级的 ul 或 div 标签上，而不是每个 li 元素上都添加。 - Jeremy

@jrquick 这是真的..但就像我的原始答案一样，当使用这种方法点击链接时，在较大的屏幕尺寸上仍会出现故障。如果您找到了消除这个问题的方法，请发布一个fiddle，我会相应地更新我的答案。 - Jake Taylor

Answer 2

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

在HTML中的菜单：

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

在导航栏中将所有的a元素绑定点击事件来折叠菜单（使用Bootstrap折叠插件）：

在导航栏中将所有的a元素绑定点击事件来折叠菜单（使用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');
     });
 });

- mollwe

---

еҰӮжһңдёҚжҳҜжүҖжңүзҡ„aе…ғзҙ пјҡдҪ еҸӘйңҖиҰҒи°ғз”Ё$("#nav-main").collapse('hide');еҚіеҸҜгҖӮ - Ankit Jain

@mollwe，你有解决下拉菜单问题的方案吗？我尝试了一下jsfiddle，但是菜单甚至都无法打开。http://jsfiddle.net/Y3H92/ - clankill3r

@mollwe，使用你的小提琴，菜单对我来说根本无法关闭。 - clankill3r

抱歉回复晚了，@clankill3r！但是迟到总比不来得好。http://jsfiddle.net/mollwe/Y3H92/5/ - mollwe

@mollwe 如果导航栏内部有下拉菜单，则会产生问题。为了避免这种情况，我们需要使用navMain.on("click", "a:not([data-toggle])", null, function () {。这样点击句柄将仅在没有"data-toggle"属性的链接上执行，即不是下拉菜单的链接上执行。还要使它更通用，最好使用var navMain = $(".navbar-collapse");。我将相应地更新答案（希望你不介意）。 - Vivek Athalye

Answer 3

我认为你过于工程化了。

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

编辑：为了处理子菜单，请确保它们的切换锚点上有dropdown-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();
            });
    });

- Hontoni

---

应该选择这个答案作为被接受的答案。其他答案过于复杂，在不响应的显示屏上闪烁。 - rybo111

这可能是可以接受的答案，但它没有考虑子菜单，实际上会破坏它们。其他一些“过度工程化”的解决方案考虑了这一点，尽管它们有缺陷。以下添加内容可以解决此问题：$(function () { $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { $('.navbar-toggle:visible').click(); }); }); - Ed Bishop

非常好，感谢您的编辑！ - Hontoni

我认为touchstart有点过头了，click可以很好地工作。如果你从按钮开始滑动，它会如何响应？ - Hontoni

太好了，谢谢！我已经将其转化为一个纯粹的js函数，并将其添加到点击事件中。 const closeMenu=e=>{if(document.getElementById(e).classList.contains("show")){document.getElementsByClassName("navbar-toggler")[0].click()}}; - Lars Schellhas

Answer 4

我非常喜欢Jake Taylor的想法，他的做法没有使用额外的JavaScript代码，而是利用了Bootstrap的折叠切换。我发现，通过微调data-target选择器以包含in类，可以解决菜单未处于折叠模式时出现“闪烁”问题。所以它看起来像这样：

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

我没有在嵌套的下拉菜单中进行测试，所以您的情况可能有所不同。

- Luke Tillman

---

对我来说，这也是最好的实现方式。 - huijing

由于某些原因，我的ScrollSpy在使用这种方法时出现了故障，但在Jake Taylor的方法中运行良好。 - Inkling

迄今为止最好、最简单的答案。 - Diaa

一直尝试让一个不闪烁的折叠效果起作用，但这绝对是最简单、最优雅的解决方案。谢谢！ - McVenco

Answer 5

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

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

- vidriduch

Answer 6

我假设你已经有了像这样定义导航区域的代码行，基于Bootstrap示例和所有内容。

<div class="nav-collapse collapse" >

只需像在“MENU”按钮上一样添加属性即可。

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

我已经添加到了<body>，它可以正常工作。虽然我没有进行过性能分析，但对我来说似乎是有效的...直到你点击 UI 的随机位置打开菜单，那就不太好了。

- Douglas 'DK' Knudsen

---

基于Bootstrap内置功能的适当解决方案；无需额外的jQuery或JavaScript。这是最简单的解决方案。这应该是被接受的答案。 - Sergi Papaseit

Answer 7

这个可以运行，但是没有动画效果。

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

- user1040259

---

这有点令人惊讶，因为在点击附近关闭会更好，但竟然没有这样的配置选项。 - bchesley

Answer 8

在HTML中，我给每个导航链接的标签添加了一个class属性，值为。

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

- Jason Swingen

Answer 9

这个解决方案在桌面和移动端都表现良好。

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

- bp002

---

当我使用navbar-id作为data-target时，它对我有用：<div id="navbar" class="collapse navbar-collapse" data-toggle="collapse" data-target="#navbar">但在桌面尺寸下会产生丑陋的动画。 - wutzebaer

Answer 10

这应该可以解决问题。

需要使用bootstrap.js。

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

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

这与在导航菜单标签中添加“data-toggle =“collapse””和“href =“yournavigationID””属性的效果相同。

- Jussi Järviö

---

你能详细解释一下答案吗？ - Blunderfest

那不是jQuery吗？同时使用jQuery和Angular不是一般的不好吗？ - AlxVallejo