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: ...
随机推荐
- CSU 1113 Updating a Dictionary(map容器应用)
题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1113 解题报告:输入两个字符串,第一个是原来的字典,第二个是新字典,字典中的元素的格式为 ...
- Apache + Tomcat + mod_jk实现集群服务
Tomcat中的集群原理是通过组播的方式进行节点的查找并使用TCP连接进行会话的复制. 实现效果:用apache 分发请求到tomcat中的对应的项目 环境说明: 操作系统:window xp Jav ...
- linux下使用rdp
简单的说就是在linux下如何远程终端连接一台windows的服务器. 在windwos下我们直接可以mstsc开启远程终端的连接.而linux下呢.就需要安装一款工具了. 命令:sudo apt-g ...
- Droid4x设置代理抓包
Droid4x也是基于virtualbox+x86架构的 代理设置 设置->WIFI->鼠标按住WiredSSID选项不放->修改网络->显示高级选项->代理-> ...
- 【Docker】docker /var/lib/docker/aufs/mnt 目录满了,全是垃圾数据,咋搞?
命令: #!/bin/bash # 推荐方式 docker volume ls -f dangling=true | awk '{ print $2 }' | xargs docker volume ...
- Nunit-Writing Tests
Nunit 测试可以被任意支持attributes的.net语言使用 Attributes被用于去标识测试类和测试方法,然后通过不同的方式修改他们的行为 Assertions针对一个或多个约束,测试一 ...
- struts2 结果页面配置
<result>标签: * 属性: * name:逻辑视图的名称 * type:结果页面类型. * dispatcher :转发.默认值. * redirect ...
- switch/ifelse 使用总结
2015年3月30日 14:12:36 switch 中的 default 和 if/else 中最后的 else 尽可能的不要用 1. 不要default, 不要写默认处理逻辑, default ...
- 算法手记 之 数据结构(线段树详解)(POJ 3468)
依然延续第一篇读书笔记,这一篇是基于<ACM/ICPC 算法训练教程>上关于线段树的讲解的总结和修改(这本书在线段树这里Error非常多),但是总体来说这本书关于具体算法的讲解和案例都是不 ...
- Greedy:Paint Color(AOJ 0531)
涂颜料 题目大意:在一个1000000*1000000的矩阵中放入几块木板,问你这些木板把矩阵划分成了几个区域?输入会给左下角和右上角的坐标,输入W==0且H==0结束. 这一题是书上的作业题,书上有 ...