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. 第12天 android studio

    1. http://jingyan.baidu.com/article/215817f7888dc21eda14230d.html Gradle DSL method not found:‘andro ...

  2. phpcms万能字段如何使用php方法

    来自:http://www.tantengvip.com/2013/12/phpcms-php-function/ phpcms后台内容模块->模型管理->添加字段功能很强大,你只需在ph ...

  3. DEV控件Grid显示行号

    DEV控件Grid的显示行号需要通过一个事件来设置,具体设置代码为: private void gridView1_CustomDrawRowIndicator(object sender, DevE ...

  4. win32程序组成

    程序代码+UI资源——RC编译器整合——>EXE档案. UI资源:二进制代码(借助工具产生,并以各种扩展名的文件存在),程序员必须在资源描述文档(.rc)中描述他们. RC编译器(RC.EXE) ...

  5. weiphp执行的流程

    微信交互   1.用户与微信进行交互,交互的事件包括:回复公众号,扫描与公众号有关的二微码,关注(取消关注)公众号,在公众号里点击自定义菜单等 2.微信把用户的交互事件及相关参数传递给weiphp的微 ...

  6. ext grid 使用combo,不显示display显示value问题

    { text: "附件类型", width: 150, dataIndex: 'uploadType', sortable: true, align: 'left', editor ...

  7. ubuntu下配置apache2多域名(apache2.4.6)

    Ubuntu 在 Linux 各发行版中, 个人用户数量最多的. 很多人在本机和虚拟机中使用. 但 Ubuntu 和 Redhat 的 VirtualHost 设置方法不相同. 1. 打开目录 /et ...

  8. win7桌面背景地址

    C:\Users\你的用户名\AppData\Local\Microsoft\Windows\Themes\Alaskan L\DesktopBackground

  9. 第三方登录(QQ登录)开发流程详解

    原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...

  10. 用Javascript主动更行URL

    参考---ttp://www.oschina.net/translate/manipulating-url-using-javascript-without-freshing-the-page var ...