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>

bootstrap垂直下拉菜单默认展开的更多相关文章

  1. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  2. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  3. java总结:Java中获取系统时间(年、月、日)以及下拉菜单默认选择系统年、月、日的方法

    <!-- 获取系统当前的年.月.日 --> <%@ page import="java.util.*"%> <% Calendar calendar= ...

  4. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  5. Bootstrap的下拉菜单float问题

    在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...

  6. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  7. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  8. Bootstrap 按钮下拉菜单

    向下拉 <div class="dropdown"> <button class="btn btn-default" data-toggle= ...

  9. js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

    1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...

随机推荐

  1. springmvc之默认错误页面跳转

    在做一个项目的时候,为了界面美观及用户体验,我们往往会设计自己的错误跳转页面,而不是直接展示给用户一堆错误码,为此我们需要配置自己的错误跳转页面. 1.项目结构 2.web.xml <!DOCT ...

  2. windows server 2008 R2 SP1 安装exchange 2010

    一. 先决条件 若在windows server R2 SP1企业版系统上典型安装exchange server2010 SP3,则需要提前确定一下先决条件 AD域环境,域和林的功能级别必须是wind ...

  3. window 下Qt for android 环境搭建

    ******************************************************************* 转自http://www.cnblogs.com/rophie/ ...

  4. 我对windows消息机制的理解(参考深入浅出MFC,欢迎批评指正!!)

    以消息为基础,以事件驱动之 程序的进行依靠外部消息来驱动,即:程序不断等待任何可能的输入,然后做判断,然后再做适当的处理. 消息输入:操作系统捕获,以消息形式进入程序.(操作系统通过其USERS模块中 ...

  5. hiho #1325 : 平衡树·Treap

    #1325 : 平衡树·Treap 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? ...

  6. HDU——PKU题目分类

    HDU 模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 ...

  7. C/C++相对论——C++中为什么要使用异常?

    C++中为什么要使用异常? 很多人也许知道C++中的异常机制,很多人也许不知道.很多人知道C中常用的assert,也知道在编译时候指定NODEBUG来忽略它. 对于C语言,使用正常的if-else即是 ...

  8. fastx_toolkit去除测序数据中的接头和低质量的reads

    高通量测序数据下机后得到了fastq的raw_data,通常测序公司在将数据返还给客户之前会做"clean"处理,即得到clean_data.然而,这些clean_data是否真的 ...

  9. C#基础语法实例荟萃

    匿名类 action = new UploadHandler(context, new UploadConfig() { AllowExtensions = Config.GetStringList( ...

  10. webrtc开源项目音频重采样“不友好接口”的几点总结

    WebRTC(Web Real Time Communication)并不是Google原来自己的技术,在2010年,Google以大约6820万美元收购了VoIP软件 开发商Global IP So ...