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>

  • 相关阅读:
    xml读写
    scrollWidth,clientWidth与offsetWidth的区别
    DIV+CSS设计时浏览器兼容性
    访问IIS客户端出现server application error解决方案
    网站局域网内不能访问解决方法之一
    xml学习笔记(一)
    文本编辑器FCKeditor
    业务部门需要IT人员为其提供什么
    程序员与VBA之怪现状
    你的代码完成了吗?(之一)——可用性和易用性
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/5497999.html
Copyright © 2011-2022 走看看