TzuHsing Su

响应式nav点击导航栏链接或滑动网页自动折叠
**响应式nav点击导航栏链接或滑动网页自动折叠**代码内容:<nav class="navbar...
扫描右侧二维码阅读全文
11
2018/10

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

**

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

**

代码内容:

<nav class="navbar navbar-default navbar-inverse" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <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>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <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><!-- /.navbar-collapse -->
    </nav>  

效果
引用cnblog 陈家灼的方法,添加jq代码:

<script>
    $(window).load(function(){
      // 当小屏幕下的导航条折叠
      if ($(window).width()<768){
        // 点击导航链接之后,把导航选项折叠起来
        $("#navbar a").click(function(){
        $("#navbar").collapse('hide');
        });
        // 滚动屏幕时,把导航选项折叠起来
        $(window).scroll(function(){
          $("#navbar").collapse('hide');
        });
      }
    });
  </script>

最终效果
此功能应用bootstrap的collapse方法:

方法 描述 实例
Options:.collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。 $('#identifier').collapse({ toggle: false })
Toggle:.collapse('toggle') 切换显示/隐藏可折叠元素。 $('#identifier').collapse('toggle')
Show: .collapse('show') 显示可折叠元素。 $('#identifier').collapse('show')
Hide: .collapse('hide') 隐藏可折叠元素。 $('#identifier').collapse('hide')
最后修改:2019 年 08 月 09 日 07 : 49 PM
如果覺得我的文章對你有用,請隨意讚賞

發表評論