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>
  • 相关阅读:
    LETTers比赛第十二场解题报告
    LETTers练习赛第十场 第四题
    LETTers练习赛第十场 第二题
    LETTers练习赛第十场 第一题
    LETTers练习赛十一场解题报告
    RedHat Enterprise Linux 基本网络配置
    c# 连接MySQL中文乱码问题的解决方法
    [原]iBatis.Net(C#)系列一:简介及运行环境
    ArcGIS 9.3 sp1 下载更新
    [原]iBatis.Net(C#)系列二:SQL数据映射
  • 原文地址:https://www.cnblogs.com/Zmmy/p/8536554.html
Copyright © 2011-2022 走看看