响应式nav点击导航栏链接或滑动网页自动折叠

TzuHsing Su

2018-10-11

3209 次瀏覽

暫無評論

867字数

web前端

响应式nav点击导航栏链接或滑动网页自动折叠
----

代码内容：

<nav class="navbar navbar-default navbar-inverse" role="navigation">
          
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Title</a>
          </div>
    
          
          <div class="collapse navbar-collapse navbar-ex1-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>

![效果][1]：
引用[cnblog 陈家灼][2]的方法，添加jq代码：
    <script>
        $(window).load(function(){
          // 当小屏幕下的导航条折叠
          if ($(window).width()<768){
            // 点击导航链接之后，把导航选项折叠起来
            $("#navbar a").click(function(){
            $("#navbar").collapse('hide');
            });
            // 滚动屏幕时，把导航选项折叠起来
            $(window).scroll(function(){
              $("#navbar").collapse('hide');
            });
          }
        });
      </script>

[最终效果][3]
此功能应用bootstrap的collapse方法：
<table class="table table-bordered">
      <tr>
        <th>方法</th>
        <th>描述</th>
        <th>实例</th>
      </tr>
      <tr>
        <td><code>Options:.collapse(options)</code></td>
        <td>激活内容为可折叠元素。接受一个可选的 options 对象。</td>
        <td><code>$('#identifier').collapse({
            toggle: false
        })</code></td>
      </tr>
      <tr>
        <td><code>Toggle:.collapse('toggle')</code></td>
        <td>切换显示/隐藏可折叠元素。</td>
        <td><code>$('#identifier').collapse('toggle')</code></td>
      </tr>
      <tr>
        <td><code>Show: .collapse('show')</code></td>
        <td>显示可折叠元素。</td>
        <td><code>$('#identifier').collapse('show')</code></td>
      </tr>
      <tr>
        <td><code>Hide: .collapse('hide')</code></td>
        <td>隐藏可折叠元素。</td>
        <td><code>$('#identifier').collapse('hide')</code></td>
      </tr>
    </table>

[1]: http://ws1.sinaimg.cn/large/005LiQFdgy1fw4f0vyp3tj30eg0a7t8p.jpg
  [2]: https://www.cnblogs.com/Wudj/p/9108649.html
  [3]: https://images2018.cnblogs.com/blog/1352798/201805/1352798-20180530003343691-361612275.gif

最后修改：2019-08-09