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: ...
随机推荐
- MongoDB的索引(三)
MongoDB的索引: 1. _id索引 该索引是大多数集合默认创建的索引,也就是说用户每插入一个数据,MongoDB会自动生成一条唯一的_id字段. 2. 单键索引 单键索引是最普通的索引,它不会自 ...
- iOS开发——高级篇——iOS键盘的相关设置(UITextfield)
一.键盘风格 UIKit框架支持8种风格键盘. typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 UIKeyboardTypeASCIICapa ...
- Python自动化之sqlalchemy复合外键
复合外键用法 metadata = MetaData(engine) classedu = Table('classedu', metadata, # Column('qq', BigInteger, ...
- PL/Cool
毛子 2003 Petrozavodsk, Final Contest, 8.30.03. G. PL/Cool 实现一个程序,使它读入一段PL/Cool程序,并输出它的结果. PL/Cool语法 b ...
- 【GoLang】深入理解slice len cap什么算法? 参数传递有啥蹊跷?
先上结论 .内置append函数在现有数组的长度 < 时 cap 增长是翻倍的,再往上的增长率则是 1.25,至于为何后面会说. .Go语言中channel,slice,map这三种类型的实现机 ...
- SQL Server OBJECT_ID() 函数
OBJECT_ID 返回架构范围内对象的数据库对象标识号. 重要提示 使用 OBJECT_ID 不能查询非架构范围内的对象(如 DDL 触发器).对于在 sys.objects 目录视图中找不到的对象 ...
- 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 ...
- Linux设置交换分区swap
参考: http://www.vpser.net/opt/vps-add-swap.html https://www.zntec.cn/archives/vps-swap.html http://yz ...
- 1.把二元查找树转变成排序的双向链表[BST2DoubleLinkedList]
[题目]:输入一棵二元查找树,将该二元查找树转换成一个排序的双向链表.要求不能创建任何新的结点,只调整指针的指向. 比如将二元查找树 . 10 / \ 6 14 / \ / \ 4 8 12 16 转 ...
- Unity3d《Shader篇》Logo闪光特效
Shader "Custom/Flash" { Properties { _MainTex ("Base (RGB)", 2D) = "white&q ...