Question

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

非常感谢并拥抱能够指出我正确方向的人！

Answer 1

如果您使用的是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>

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

干杯。

Answer 2

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

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

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

Answer 3

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

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

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

});

Answer 4

示例标记，例如来自Bootstrap documentation：

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

替代方案：任意点击关闭

像查理·达尔萨斯一样，建议在点击页面时也可以关闭菜单。为此，您可以使用以下内容替换上面的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 将在菜单打开/关闭时绑定和取消绑定此处理程序，并避免在用户每次单击时徒劳地运行处理程序。但是，它不太可能产生任何明显的影响。

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

Answer 5

如果有其他人感兴趣，我在其他地方找到了解决方案。这很简单。

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

Answer 6

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

        $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });

Answer 7

请注意，将数据切换和数据目标属性添加到锚元素的方法不适用于配置的scrollspy。 BS的ScrollSpy无法再激活菜单项。

Twitter Bootstrap移动导航：单击菜单链接后隐藏菜单

7 个答案:

关闭菜单项单击

替代方案：任意点击关闭