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: ...
随机推荐
- 第12天 android studio
1. http://jingyan.baidu.com/article/215817f7888dc21eda14230d.html Gradle DSL method not found:‘andro ...
- phpcms万能字段如何使用php方法
来自:http://www.tantengvip.com/2013/12/phpcms-php-function/ phpcms后台内容模块->模型管理->添加字段功能很强大,你只需在ph ...
- DEV控件Grid显示行号
DEV控件Grid的显示行号需要通过一个事件来设置,具体设置代码为: private void gridView1_CustomDrawRowIndicator(object sender, DevE ...
- win32程序组成
程序代码+UI资源——RC编译器整合——>EXE档案. UI资源:二进制代码(借助工具产生,并以各种扩展名的文件存在),程序员必须在资源描述文档(.rc)中描述他们. RC编译器(RC.EXE) ...
- weiphp执行的流程
微信交互 1.用户与微信进行交互,交互的事件包括:回复公众号,扫描与公众号有关的二微码,关注(取消关注)公众号,在公众号里点击自定义菜单等 2.微信把用户的交互事件及相关参数传递给weiphp的微 ...
- ext grid 使用combo,不显示display显示value问题
{ text: "附件类型", width: 150, dataIndex: 'uploadType', sortable: true, align: 'left', editor ...
- ubuntu下配置apache2多域名(apache2.4.6)
Ubuntu 在 Linux 各发行版中, 个人用户数量最多的. 很多人在本机和虚拟机中使用. 但 Ubuntu 和 Redhat 的 VirtualHost 设置方法不相同. 1. 打开目录 /et ...
- win7桌面背景地址
C:\Users\你的用户名\AppData\Local\Microsoft\Windows\Themes\Alaskan L\DesktopBackground
- 第三方登录(QQ登录)开发流程详解
原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...
- 用Javascript主动更行URL
参考---ttp://www.oschina.net/translate/manipulating-url-using-javascript-without-freshing-the-page var ...