<!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. myeclipse的安装与配置和JUnit的简单使用

    安装配置 首先根据自己电脑系统选择合适的JDK版本 http://www.oracle.com/technetwork/java/javase/downloads/index.html 这是JDK下载 ...

  2. fedora 使用

    我们在这篇指南中将介绍安装Fedora 23工作站版本后要完成的一些实用操作,以便用起来更爽. 1.更新Fedora 23程序包 哪怕你可能刚刚安装/升级了Fedora 23,仍很可能会有需要更新的程 ...

  3. iOS最全的常用正则表达式大全

    很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,包括校验数字.字符.一些特殊的需求等等.给自己留个 ...

  4. python实现文件下载图片视频

    最近在学习爬虫,在爬取网站时很多时候是需要将图片或视频下载到本地 今天就来说说如何使用urllib将图片保存到本地 以下代码均为win7  python3.6.* 方法一(使用下载函数保存) from ...

  5. 如何从平面设计转行到UI设计？

    时代的变迁,科技的进步,工具的发展,薪资的差距,促使许多人转行的原因,但平面与界面两者之间有着哪些的差异呢?如果,想要转行又该具备哪些条件呢? 平面.界面设计之间的差异性 平面设计以『视觉』为主轴,强 ...

  6. Sliding Window Maximum LT239

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  7. jmeter多用户并发

    1.需要参数化 2.单用户需要在请求头里面传入cookie

  8. pc-H5 适配方案

    一.介绍 在前端项目页面开发中,尤其是H5页面开发,我们常常要适配各种分辨率的屏幕,才能让用户获得最好的体验效果.pc也是如此,很多页面是一屏,也是要适配各种尺寸的分辨率.这时候我们就需要对各种分辨率 ...

  9. 利用PHPExcel读取excel文件

    $filePath = "7788.xls"; $PHPExcel = new PHPExcel(); $PHPReader = new PHPExcel_Reader_Excel ...

  10. javabean为什么需要序列化

    无论用hibernate或者mybatis结合spring做开发还是其他,系统里持久类往往要实现序列化, implements Serializable.我还是比较好奇,为什么要这样做呢?一直只知道个 ...