<!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下拉菜单的更多相关文章

  1. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  2. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  3. Bootstrap3系列：下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  4. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  5. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  6. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

  7. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  8. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  9. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

随机推荐

  1. Hadoop（三） HADOOP常用命令参数介绍

    -help 功能:输出这个命令参数手册 -ls                  功能:显示目录信息 示例: hadoop fs -ls hdfs://hadoop-server01:9000/ 备注 ...

  2. Eclipse中的maven项目搭建

    一.eclipse中的maven设置 1.打开“首选项”----> "maven"---->"Installations".用来查看maven的使用 ...

  3. 从1~N中任选出三个数,最小公倍数最大

    已知一个正整数N,问从1~N中任选出三个数,它们的最小公倍数最大可以为多少. 当n为奇数:n.n-1.n-2这是三个最大数,并且它们两两互质.因为连续的奇.偶.奇,互质.连续的两个数互质是因为它们的公 ...

  4. NServiceBus消息重播

    https://docs.particular.net/tutorials/message-replay/ 链接:https://pan.baidu.com/s/1KdWvpfZYZ2wUivkt3B ...

  5. fetch获取json的正确姿势

    fetch要求参数传递,遇到请求无法正常获取数据,网上其他很多版本类似这样: fetch(url ,{ method: 'POST', headers:{ 'Accept': 'application ...

  6. Django框架之Ajax和form组件

    一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...

  7. BP神经网络的理论理论常识

    BP神经网络的简单结构:输入层.一个或者多个隐层.输出层.图如下: 在图中,涉及到的参数有:X1--Xn为输入参数.输入参数通过输入层和隐层之间的的链接权重进行计算,到达隐层. 隐层的输入参数通过隐层 ...

  8. kbmmw 5.02发布

    5.02.00 May 27 2017 Important notes (changes that may break existing code) ========================= ...

  9. 2018.12.17 bzoj1406 : [AHOI2007]密码箱（简单数论）

    传送门 简单数论暴力题. 题目简述:要求求出所有满足x2≡1mod&ThinSpace;&ThinSpace;nx^2\equiv1 \mod nx2≡1modn且0≤x<n0\ ...

  10. Centos7 yum install vim 出现“could not retrieve mirrorlist”

    ps:来源 https://www.cnblogs.com/justphp/p/5959655.html 办法一:改dns解析 vim /etc/resolv.conf 添加: nameserver ...