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. maven之ubutu安装

    1.下载地址:http://maven.apache.org/download.cgi 2.安装 将下载后的文件解压到你指定的文件即可,命令如下: tar -xzvf apache-maven-3.0 ...

  2. H5图像遮罩-遁地龙卷风

    (-1)写在前面 这个idea不是我的,向这位前辈致敬.我用的是chrome49.用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970 ...

  3. 简单实现div遮罩

    顾名思义,div遮罩就是将网页上的一部分用div遮盖起来,防止用户误点,因此div遮罩的一个用途就是将table设置为不可编辑. 作者通过查找资料,并进行简单的测试,最终完成了以下几段简单代码,来实现 ...

  4. 如何获取到Android控件的高度

    问题 如何获取一个控件的长和高,相信很多朋友第一眼看见这个问题都会觉得很简单,直接在onCreate里面调用getWidth.getMeasuredWidth不就可以获得了吗,但是,事实上是并没有简单 ...

  5. HNU 12886 Cracking the Safe(暴力枚举)

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12886&courseid=274 解题报告:输入4个数 ...

  6. [codevs1022]覆盖

    [codevs1022]覆盖 试题描述 有一个N×M的单位方格中,其中有些方格是水塘,其他方格是陆地.如果要用1×2的矩阵区覆盖(覆盖过程不容许有任何部分重叠)这个陆地,那么最多可以覆盖多少陆地面积. ...

  7. 4-python学习——数据操作

    4-python学习--数据操作 参考python类型转换.数值操作(收藏) Python基本运算符 数据类型转换: 有时候,可能需要执行的内置类型之间的转换.类型之间的转换,只需使用类名作为函数. ...

  8. window下安装mongodb及php mongo扩展

    1.安装mongoDB 下载最新版本的 MongoDB 下载地址:http://www.mongodb.org/downloads 解压文件到 D:\mongodb 解压后的文件列表如下: 创建数据存 ...

  9. SQL 执行计划(二)

    最近总想整理下对MSSQL的一些理解与感悟,却一直没有心思和时间写,晚上无事便写了一篇探索MSSQL执行计划,本文讲执行计划但不仅限于讲执行计划. 网上的SQL优化的文章实在是很多,说实在的,我也曾经 ...

  10. div加jquery实现iframe标签的功能

    由于最近项目需要,前端后台都完全采用div+css的方式布局.因而左思右想,有什么办法可以替代常用的iframe上下左右的布局方式,而且页面只是局部刷新.参考了许多前辈的资料,并加以整理,因而有了以下 ...