20

我正在寻找一种方法来使 Twitter Bootstrap 移动/平板电脑导航在单击菜单链接后自动隐藏/折叠。我有很多菜单项，所以当用户在 iPhone 中展开菜单时，他们只看到菜单而不是下面的页面。当用户单击菜单链接时，这会使用户感到困惑，使得单击后似乎没有发生任何事情。

非常感谢您，并拥抱任何可以为我指明正确方向的人！

4

7 回答 7

25

如果您使用的是 BS3.x，您可以使用如下标记折叠移动导航 - 请注意主页链接标记中的“data-toggle”和“data-target”：

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

您还可以通过如下脚本折叠移动导航：

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

这种方法绝对不需要额外的标记。每次在导航中单击链接时，都会切换导航栏。

干杯。

于 2013-12-17T21:22:29.383 回答
17

我发现最简单的方法是在需要折叠移动导航栏的任何导航栏链接上使用数据属性。使用data-target=".navbar-collapse.in"以便导航栏仅在其打开状态下切换，而不是每次单击链接时。

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

http://codeply.com/go/bp/lbIb5ZaHbq

于 2015-02-23T22:11:34.023 回答
9

每当用户单击正文上的任何位置时都应关闭导航 - 而不仅仅是导航元素。说菜单已打开，但用户在页面正文中单击。用户希望看到菜单关闭。

您还必须确保切换按钮可见，否则会在菜单中看到跳转。

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});
于 2014-07-26T02:46:07.773 回答
4

Bootstrap 文档中的示例标记：

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

关闭菜单项点击

相应地添加到您的Javascript：

$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

备选方案：任意点击关闭

就像 Charlie Dalsass 建议的那样，最好在单击页面时关闭菜单。为此，您可以将上面的 Javascript 替换为以下内容：

$('body').click(function(e) {
    // don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

更简洁的imo将在菜单打开/关闭时绑定和取消绑定此处理程序，并避免在用户每次单击时徒劳地运行处理程序。不过，它不太可能产生任何明显的影响。

我创建了一个堆栈交换帐户只是为了支持 Skelly 的答案，因为它很简单。然后我发现没有声誉就不能投票。然后我发现了这个解决方案是如何破坏 ScrollSpy 的。现在，这是最适合我的解决方案，没有不必要的副作用。

于 2015-11-29T04:43:08.887 回答
1

如果其他人有兴趣，我在其他地方找到了解决方案。它非常简单。

将此 id 添加到您的标记中：

<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

并将其添加到您的 JS 中：

$('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });
于 2013-06-03T00:27:06.317 回答
1

如果您使用子菜单，您必须修改@user2562923 的代码如下：

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });
于 2015-10-13T03:42:08.630 回答
0

请注意，将 data-toggle 和 data-target 属性添加到锚元素的方法不适用于配置的 scrollspy。BS 的 ScrollSpy 无法再激活菜单项。

于 2014-08-02T08:50:49.557 回答