zoukankan      html  css  js  c++  java
  • bootstrap垂直下拉菜单默认展开

    HTML:

    <div class="col-md-3">

      <nav class="navbar">

        <div class="container-fluid">

          <div class="navbar-header common-border-bottom common-border-right common-border-left">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">     

              <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>

            </button>

          </div>

          <div class="collapse navbar-collapse common-border-right common-border-bottom common-border-left" id="bs-example-navbar-collapse-1">

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

              <li class="dropdown open input-interval">

               <a class="dropdown-toggle" data-toggle="dropdown">人生无常<b class="caret"></b></a>

                 <ul class="dropdown-menu">

                   <li><a href="#">人性凉薄</a></li>

                   <li><a href="#">看透了然</a></li>

                 </ul>

              </li>

            </ul>

          </div>

        </div>

      </nav>

    </div>

    由于加了open 所以默认是展开的,但是有个问题就是无论点击网页的任何地方都会折叠。以下的js解决了这个问题

    JS:

    <script>

      $(function () {

        var openddt = $(".open").children('.dropdown-toggle');

        openddt.attr('data-toggle', '');

        openddt.click(function () {

          $(this).siblings(".dropdown-menu").toggle();

        });

      })

    </script>

  • 相关阅读:
    PHP学习之路(六)
    PHP学习之路(五)
    PHP学习之路(四)
    PHP学习之路(三)
    PHP学习之路(二)
    PHP学习之路(一)
    webstrom运行出现404的解决办法
    适配移动端Swiper的3D旋转木马轮播~
    为什么觉得英文字体设计比中文字体设计来的好看?
    linux 部署系统通过SecureCRT启动tomcat 控制台中文乱码
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5497999.html
Copyright © 2011-2022 走看看