Question

如何更改移动视图的data-offset-top？此外，点击链接不会隐藏菜单。我从stackoverflow尝试了一些已创建的代码，但没有运气。有人可以帮助以下链接：

http://smalldesigncompany.com/client/agami/s4/index.html

<nav class="navbar navbar-default zero-mar" >
                  <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>



            </div><!--NAVBAR-HEADER-->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 pull-left">
                <ul class="nav navbar-nav">
                    <li>
                        <a class="scroll" href="#top">Home</a>
                    </li>
                    <li>
                        <a class="scroll" href="#people">Meet Our People</a>
                    </li>
                    <li>
                         <a class="scroll" href="#projects">Our Capabilities</a>
                    </li>

                    <li>
                         <a class="scroll" href="#process">Our Process</a>
                    </li>
                    <li>
                       <a class="scroll" href="#why">Why Agami</a>
                    </li>
                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li><a href="projects.html"><span class="right">Projects</span></a></li>
                    <li><a href="contact.html"><span class="right">Contact</span></a></li>

                 </ul>
              </div>
             <!-- /.navbar-collapse -->
        </div>
            </nav>

Answer 1

试试这种方式

$('.navbar-nav a').on('click', function () {
        $(".navbar-toggle").click() //bootstrap 3.x 
    });

Answer 2

永远不要在同一个div上使用多个ID

对于navbar-toggle，只需使用navbar-collapse data-target菜单中的navbar-toggle菜单的 ID 作为：

data-target="#bs-example-navbar-collapse-1"

要再次隐藏navbar-collapse菜单，您必须trigger点击navbar-toggle点击.navbar-nav > li > a按钮：

代码段

$('.navbar-nav > li > a').on('click', function() {
  $('.navbar-toggle').trigger('click');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>



    </div>
    <!--NAVBAR-HEADER-->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a class="scroll" href="#top">Home</a>
        </li>
        <li>
          <a class="scroll" href="#people">Meet Our People</a>
        </li>
        <li>
          <a class="scroll" href="#projects">Our Capabilities</a>
        </li>

        <li>
          <a class="scroll" href="#process">Our Process</a>
        </li>
        <li>
          <a class="scroll" href="#why">Why Agami</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="projects.html"><span class="right">Projects</span></a>
        </li>
        <li><a href="contact.html"><span class="right">Contact</span></a>
        </li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</nav>

Answer 3

＆＃13;

$('.navbar-nav > li > a').on('click', function() {
  $('.navbar-toggle').trigger('click');
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default zero-mar">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>



    </div>
    <!--NAVBAR-HEADER-->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse pull-left" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a class="scroll" href="#top">Home</a>
        </li>
        <li>
          <a class="scroll" href="#people">Meet Our People</a>
        </li>
        <li>
          <a class="scroll" href="#projects">Our Capabilities</a>
        </li>

        <li>
          <a class="scroll" href="#process">Our Process</a>
        </li>
        <li>
          <a class="scroll" href="#why">Why Agami</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="projects.html"><span class="right">Projects</span></a>
        </li>
        <li><a href="contact.html"><span class="right">Contact</span></a>
        </li>

      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
</nav>

＆＃13;

Answer 4

这个答案可能会使我觉得事情太简单了，但是我经常看到jquery / bootstrap脚本被加载了两次，这意味着两个监听器在等待按钮切换。第一个打开，第二个立即关闭。

解决方案：查找通过浏览器检查（F12）加载两次的脚本，并删除方便的地方。

单击后，Bootstrap导航栏不会隐藏

4 个答案:

代码段