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. nginx反向代理、让代理节点记录客户端真实IP

    环境:根据http://www.cnblogs.com/zzzhfo/p/6032095.html环境配置 在web01或web02上查看用户访问日志 先客户端访问 [root@web_backup ...

  2. Lucene4.1 视频学习

    1.将路径建立在内存中 Directory d = new RAMDirectiry(); 2.Filed Index(索引选项):Index.ANALYZED:进行分词和索引,适应于标题,内容等In ...

  3. 如何预览github中的html页面

    在github里面的文件路径是https://github.com/gavin125/Sass-test/blob/master/html/index.html 那么我们需要在这个地址前面加上http ...

  4. Internet与www的关系

    Internet是把分布于世界各地不同结构的计算机网络用各种传输介质相互连接起来的网络. 因此,被称为网络的网络.Internet提供的主要服务有万维网(WWW.)文件传输(FTP.)电子邮件(E-m ...

  5. MyEclipse自带maven找不到或自己外置安装

    我用的MyEclipse2015 stable2.0版本. 1.删除相关SoftwareHelp --> choose components --> 进入后点 已安装的maven选项. 由 ...

  6. BZOJ 4665: 小w的喜糖

    Sol DP+容斥. 这就是一个错排的扩展...可是想到容斥却仅限于种数的容斥,如果种数在一定范围内我就会做了QAQ. 但是容斥的是一定在原来位置的个数. 发现他与原来的位置无关,可以先把每个同种的糖 ...

  7. 3-python学习——变量

    变量是我所接触过的编程语言中都具有的一个概念,只是这个概念有的强有的弱罢了. 1.什么是python的变量 变量这个东西怎么解释呢?不怎么好说. 这么说吧,变量就相当于一个代名词,或者说是名字. 计算 ...

  8. EXTJS Ajax请求中文乱码

    设置actionMethods, read为post proxy: { type: 'ajax', url: '../Dictionary/query', actionMethods: { read: ...

  9. 求最大公约数和小于n的所有质数

    //algorithm.h enum SWAP_TYPE{MEMORY, COMPLEX}; struct SIntArray { int *pData; int num; SIntArray():p ...

  10. 前端开发必须知道的JS(二) 闭包及应用

    http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html 在前端开发必须知道的JS(一) 原型和继承一文中说过下面写篇闭包,加之最近越 ...