bootstrap4.1下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
/*margin三个值代表上 左 右下*/
.a{
border: none;
}
div>ul{
display: none;
}
.b{
display: block;
}
</style>
</head>
<body style="margin: 200px;">
<!--jQuery最好在body内写-->
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<div class="dropdown">
<button class="btn-info a">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">财经</a>
</li>
<li>
<a href="#">体育</a>
</li>
</ul>
</div>
<script>
第一种做法
// $("div>button").click(function(){
// $("div>button").next().toggle() //css display: none;
// })
第二种做法
d=true
$("div>button").click(function(){
if (d) {
$("div>button").next().addClass("b")
d=false
} else{
$("div>button").next().removeClass("b")
d=true
}
})
</script>
</body>
</html>
bootstrap4.1下拉菜单的更多相关文章
- 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- Bootstrap3系列：按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap3系列：下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
随机推荐
- 探索未知种族之osg类生物---呼吸分解之事件循环三
那我们就开始处理这些事件中得到的所有的交互事件,首先我们要判断这些事件是否包含osg的退出事件,那什么情况下会触发这个退出事件呢?如果您运行过osg中example中的小例子的,聪明的你一定就会发现当 ...
- [ES]elasticsearch章2 ES查询过程解析
es服务端是准确知道每个document分布在哪个shard上: search一个比较复杂的执行模式,因为我们不知道那些document会被匹配到,任何一个shard上都有可能,所以一个search请 ...
- vue组件中this和$el指向
示例代码为element ui 源码的select组件源码 控制台输出: 结论: this指向组件的实例. $el指向当前组件的DOM元素.
- Java学习笔记：23种设计模式
设计模式(Design pattern)的定义: In software engineering, a software design pattern is a general, reusable s ...
- SpringBoot获取resource下证书失败
1.第一种失败的情况: 本来使用Spring的上下文容器获取文件,将证书文件放在resource下,编译后获取文件会出现报错 java.security.spec.InvalidKeySpecE ...
- JDBC连接MySql，配置url报错
使用JDBC连接MySql时出现:The server time zone value '�й���ʱ��' is unrecognized or represents more than one ...
- 求一个数的n次幂
1.当这个数是2的多少次幂: 求(2^m)^n = 2^(m*n) = 1<<m*n; 2.快速幂(要考虑底数a,和m的正负) int quick_mod(int a,int m){ ...
- 2018.11.03 NOIP模拟 树（长链剖分优化dp）
传送门 考虑直接推式子不用优化怎么做. 显然每一个二进制位分开计算贡献就行. 即记录fi,jf_{i,j}fi,j表示距离iii这个点不超过jjj的点的每个二进制位的0/10/10/1个数. 但直接 ...
- 2018.10.29 bzoj4564: [Haoi2016]地图（仙人掌+莫队）
传送门 根据原图建一棵新的树. 把原图每一个环上除了深度最浅的点以外的点全部向深度最浅的点连边. 然后可以搞出来一个dfsdfsdfs. 这个时候我们就成功把问题转换成了对子树的询问. 然后就可以对权 ...
- 2018.10.25 uoj#308. 【UNR #2】UOJ拯救计划（排列组合）
传送门 有一个显然的式子:Ans=∑A(n,i)∗用i种颜色的方案数Ans=\sum A(n,i)*用i种颜色的方案数Ans=∑A(n,i)∗用i种颜色的方案数 这个东西貌似是个NPCNPCNPC. ...