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>

  • 相关阅读:
    ABB机器人 带参数例行程序
    面试题10- I:斐波那契数列(C++)
    面试题39:数组中出现次数超过一半的数字(C++)
    面试题50:第一个只出现一次的字符(C++)
    第八部分 表的基本操作
    第七部分 表中数据的基本操作
    面试题18:删除链表的节点(C++)
    面试题35:复杂链表的复制(C++)
    面试题54:二叉搜索树的第k大节点(C++)
    面试题62:圆圈中最后剩下的数字(C++)
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5497999.html
Copyright © 2011-2022 走看看