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. MongoDB的索引(三)

    MongoDB的索引: 1. _id索引 该索引是大多数集合默认创建的索引,也就是说用户每插入一个数据,MongoDB会自动生成一条唯一的_id字段. 2. 单键索引 单键索引是最普通的索引,它不会自 ...

  2. iOS开发——高级篇——iOS键盘的相关设置(UITextfield)

    一.键盘风格 UIKit框架支持8种风格键盘. typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 UIKeyboardTypeASCIICapa ...

  3. Python自动化之sqlalchemy复合外键

    复合外键用法 metadata = MetaData(engine) classedu = Table('classedu', metadata, # Column('qq', BigInteger, ...

  4. PL/Cool

    毛子 2003 Petrozavodsk, Final Contest, 8.30.03. G. PL/Cool 实现一个程序,使它读入一段PL/Cool程序,并输出它的结果. PL/Cool语法 b ...

  5. 【GoLang】深入理解slice len cap什么算法? 参数传递有啥蹊跷?

    先上结论 .内置append函数在现有数组的长度 < 时 cap 增长是翻倍的,再往上的增长率则是 1.25,至于为何后面会说. .Go语言中channel,slice,map这三种类型的实现机 ...

  6. SQL Server OBJECT_ID() 函数

    OBJECT_ID 返回架构范围内对象的数据库对象标识号. 重要提示 使用 OBJECT_ID 不能查询非架构范围内的对象(如 DDL 触发器).对于在 sys.objects 目录视图中找不到的对象 ...

  7. Best Time to Buy and Sell Stock with Cooldown

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  8. Linux设置交换分区swap

    参考: http://www.vpser.net/opt/vps-add-swap.html https://www.zntec.cn/archives/vps-swap.html http://yz ...

  9. 1.把二元查找树转变成排序的双向链表[BST2DoubleLinkedList]

    [题目]:输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表.要求不能创建任何新的结点,只调整指针的指向. 比如将二元查找树 . 10 / \ 6 14 / \ / \ 4 8 12 16 转 ...

  10. Unity3d《Shader篇》Logo闪光特效

    Shader "Custom/Flash" { Properties { _MainTex ("Base (RGB)", 2D) = "white&q ...