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 ...
随机推荐
- 向kafka批量发送已存在的txt文件
需要利用kafka发送txt或log文件,有两种方式:1.自己写程序:2.利用kafka自带脚本. 自己写程序: import org.apache.kafka.clients.producer.Ka ...
- sql重复数据的过滤问题
有重复数据主要有一下几种情况: 1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 example: select distinct * from table(表名) ...
- git回退文件修改
假设git仓库某个文件的提交信息如下: [cxy@localhost-live mate-power-manager]$ git log -n3 SPECS/mate-power-manager.sp ...
- Git 分支 主干
~/Desktop/work/movies/movie(apps) $ git status //先查看是否有需要提交的东西# On branch appsnothing to commit (wo ...
- Sliding Window Median LT480
Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...
- ASP.NET 在OnClientClick中js方法直接调用Eval绑定字段的数据
最近有一项目中使用到了asp.net的GridView控件.需要在前端被点击某一行数据时,前端获取到改行后台绑定的数据序列号.遍用<%# Bind("ID) %>.<%# ...
- sqlserver 添加服务器链接 跨服务器访问数据库
转载地址1:https://www.cnblogs.com/wanshutao/p/4137994.html //创建服务器链接 转载地址2:https://www.cnblogs.com/xulel ...
- Django 自定义模板标签TemplateTags
创建自定义的模板标签(template tags) Django提供了以下帮助函数(functions)来允许你以一种简单的方式创建自己的模板标签(template tags): simple_tag ...
- JS高级-***Function- ***OOP
1. ***Function 作用域(scope): 什么是: 一个变量的使用范围 为什么: 避免函数内外的变量间互相影响 包括: 2种: 1. 全局作用域: window 保存着全局变量: 随处可用 ...
- dblink(转)
oracle在进行跨库访问时,可以通过创建dblink实现,今天就简单的介绍下如果创建dblink,以及通过dblink完成插入.修改.删除等操作 首先了解下环境:在tnsnames.ora中配置两个 ...