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: ...
随机推荐
- 解决访问ajax.googleapis.com链接失败方法
参考文章:http://www.jianshu.com/p/690e28f7fde6 主要思路:修改hosts文件,将其网址ajax.googleapis.com指向本地服务器:本地服务器将通过aja ...
- UIView的layoutSubviews和drawRect
原文: UIView的layoutSubviews和drawRect UIView的setNeedsDisplay和setNeedsLayout方法.首先两个方法都是异步执行的.setNeedsDis ...
- python扩展实现方法--python与c混和编程 转自:http://www.cnblogs.com/btchenguang/archive/2012/09/04/2670849.html
前言 需要扩展Python语言的理由: 创建Python扩展的步骤 1. 创建应用程序代码 2. 利用样板来包装代码 a. 包含python的头文件 b. 为每个模块的每一个函数增加一个型如PyObj ...
- CCP浅谈
说明 如果想详细了解CCP,可以下载AN-AMC-1-102_Introduction_to_CCP.pdf或者ccp211.pdf 本文不涉及到专业的知识讲解,如果想查看更加专业的知识可以选择看完以 ...
- (转)Singleton 单例模式(懒汉方式和饿汉方式)
原文地址:http://www.cnblogs.com/kkgreen/archive/2011/09/05/2166868.html 单例模式的概念: 单例模式的意思就是只有一个实例.单例模式确保某 ...
- Additive Number
Additive number is a string whose digits can form additive sequence. A valid additive sequence shoul ...
- Unity3d 怪物死亡燃烧掉效果
效果 BurnToFadeOut.shader代码 Shader "BurnToFadeOut" { Properties { _StartColor ("Start C ...
- selenium webdriver学习(一)
package baidu; import java.io.File; import java.io.IOException; import junit.framework.TestCase; imp ...
- ffmpeg-20160718-git-bin.7z
官方 2016-07-18 发布的bin,彻底不支持 xp. ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] + ...
- Mingw32 for ffmpeg
2016.02.27之后, ffmpeg 官方不在支持 XP 系统,需要下载源码自己编译. 整了好几天搭建了 MinGW32 for XP 安装了 ffmpeg 所需的几乎所有的库文件. 除了 lib ...