Bootstrap close responsive "on click“

Question

在"PRODUCTS“上，单击I slide up a白色div (如附件所示)。在响应式(移动和平板电脑)模式下，我想自动关闭响应式导航栏，只显示白条。

我试过了：

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

还尝试了：

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

它确实起作用了。然而，在桌面大小，它也被称为，并做了一些时髦的菜单，它缩小了一秒钟。

有什么想法吗？

​

​

Answer 1

我已经把它用在动画上了！

html格式的菜单：

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

导航到折叠菜单(Bootstrap折叠插件)中所有a元素上的绑定单击事件：

 $(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 2

你不需要添加任何额外的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中，我不能使用可见/隐藏类。使用d-none d-sm-block而不是hidden-xs，使用d-block d-sm-none而不是visible-xs。

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