bootstrap垂直下拉菜单默认展开
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垂直下拉菜单默认展开的更多相关文章
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
- java总结:Java中获取系统时间(年、月、日)以及下拉菜单默认选择系统年、月、日的方法
<!-- 获取系统当前的年.月.日 --> <%@ page import="java.util.*"%> <% Calendar calendar= ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- Bootstrap的下拉菜单float问题
在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- Bootstrap 按钮下拉菜单
向下拉 <div class="dropdown"> <button class="btn btn-default" data-toggle= ...
- js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年
1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...
随机推荐
- springmvc之默认错误页面跳转
在做一个项目的时候,为了界面美观及用户体验,我们往往会设计自己的错误跳转页面,而不是直接展示给用户一堆错误码,为此我们需要配置自己的错误跳转页面. 1.项目结构 2.web.xml <!DOCT ...
- windows server 2008 R2 SP1 安装exchange 2010
一. 先决条件 若在windows server R2 SP1企业版系统上典型安装exchange server2010 SP3,则需要提前确定一下先决条件 AD域环境,域和林的功能级别必须是wind ...
- window 下Qt for android 环境搭建
******************************************************************* 转自http://www.cnblogs.com/rophie/ ...
- 我对windows消息机制的理解(参考深入浅出MFC,欢迎批评指正!!)
以消息为基础,以事件驱动之 程序的进行依靠外部消息来驱动,即:程序不断等待任何可能的输入,然后做判断,然后再做适当的处理. 消息输入:操作系统捕获,以消息形式进入程序.(操作系统通过其USERS模块中 ...
- hiho #1325 : 平衡树·Treap
#1325 : 平衡树·Treap 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,我发现我们以前讲过的两个数据结构特别相似. 小Hi:你说的是哪两个啊? ...
- HDU——PKU题目分类
HDU 模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 ...
- C/C++相对论——C++中为什么要使用异常?
C++中为什么要使用异常? 很多人也许知道C++中的异常机制,很多人也许不知道.很多人知道C中常用的assert,也知道在编译时候指定NODEBUG来忽略它. 对于C语言,使用正常的if-else即是 ...
- fastx_toolkit去除测序数据中的接头和低质量的reads
高通量测序数据下机后得到了fastq的raw_data,通常测序公司在将数据返还给客户之前会做"clean"处理,即得到clean_data.然而,这些clean_data是否真的 ...
- C#基础语法实例荟萃
匿名类 action = new UploadHandler(context, new UploadConfig() { AllowExtensions = Config.GetStringList( ...
- webrtc开源项目音频重采样“不友好接口”的几点总结
WebRTC(Web Real Time Communication)并不是Google原来自己的技术,在2010年,Google以大约6820万美元收购了VoIP软件 开发商Global IP So ...