社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
使用方法
基本用法
原理分析
扩展用法
JS触发
JS源码
首页 web前端 Bootstrap教程 深入浅出Bootstrap中的下拉菜单

深入浅出Bootstrap中的下拉菜单

青灯夜游
青灯夜游
Jun 22, 2021 am 11:10 AM
bootstrap 下拉菜单

本篇文章给大家详细介绍一下Bootstrap中的下拉菜单。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

深入浅出Bootstrap中的下拉菜单

网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项，Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。【相关推荐：《bootstrap教程》】

使用方法

　　在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果使用的是未编译版本，在js文件夹下能找到一个名为“dropdown.js”的文件，也可以调用这个js文件

　　因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
登录后复制

基本用法

　　在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用

　　1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素

<div class="dropdown"></div>
登录后复制

　　2、使用了一个

登录后复制

4.gif

【菜单标题】

　　在任何下拉菜单中均可通过添加标题来标明一组动作 

<li class="dropdown-header">Dropdown header</li>
登录后复制
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
登录后复制
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>
登录后复制

5.gif

【对齐方式】

　　Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名 

.dropdown-menu-right {
  right: 0;
  left: auto;
}
登录后复制

　　由于

默认是块级元素，撑满父级宽度。这里，需要为该元素设置inline-block和margin-left，使其内容撑开宽度，且距离左侧有一定距离

    display: inline-block;
    margin-left: 60px;
登录后复制
<div class="dropdown" style="display: inline-block;margin-left: 60px;">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>
登录后复制

6.gif

【菜单项状态】

　　下拉菜单项的默认的状态有悬浮状态（:hover）和焦点状态（:focus）

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
登录后复制

　　下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>
登录后复制

7.gif

JS触发

　　和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。但是，要特点注意的是，即使使用JS触发，也不能去掉触发元素的data-toggle="dropdown"

<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">触发器</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>
<script>
;$(function(){
    $(&#39;.dropdown-toggle&#39;).dropdown()
});
</script>
登录后复制

8.gif

【toggle】

　　和Modal一样，dropdown也接收字符串作为参数进行传递，参数可以是"toggle"

　　但是，这非常不好用。每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用不带参数的方法。就算需要使用参数“toggle”，也建议使用jQuery的one方法 

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})
登录后复制

【事件订阅】

　　与Modal类似，下拉菜单支持4种类型的事件订阅，分别对应下拉菜单的弹出前、弹出后、关闭前、关闭后

show.bs.dropdown 在show方法调用时立即触发(尚未显示之前)
shown.bs.dropdown 在下拉菜单完全显示给用户之后(并且等CSS动画完成之后)触发
hide.bs.dropdown 在hide方法调用时(但还未关闭隐藏)立即触发
hidden.bs.dropdown 在下拉菜单完全隐藏之后(并且等CSS动画完成之后)触发
登录后复制
<div class="dropdown">
    <button class="btn dropdown-toggle" data-toggle="dropdown" type="button">触发器</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>
<script>
;$(function(){
    $(&#39;.dropdown&#39;).on(&#39;show.bs.dropdown&#39;,function(){
        $(&#39;.dropdown-toggle&#39;).html(&#39;关闭&#39;);
    });
    $(&#39;.dropdown&#39;).on(&#39;hide.bs.dropdown&#39;,function(){
        $(&#39;.dropdown-toggle&#39;).html(&#39;打开&#39;);
    });
    
});
</script>
登录后复制

9.gif

JS源码

【1】IIFE

　　使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展

+function ($) {
    //使用es5严格模式
    &#39;use strict&#39;;
    //
}(window.jQuery);
登录后复制

【2】初始设置

//弹出下拉菜单时的蒙版样式
  var backdrop = &#39;.dropdown-backdrop&#39;
  //dropdown触发元素的自定义属性
  var toggle   = &#39;[data-toggle="dropdown"]&#39;
  var Dropdown = function (element) {
    //插件类函数定义，一旦触发，就在click事件上绑定toggle，所以不能再用自定义代码进行toggle了
    $(element).on(&#39;click.bs.dropdown&#39;, this.toggle)
  }
  //版本号为&#39;3.3.7&#39;
  Dropdown.VERSION = &#39;3.3.7&#39;
登录后复制

【3】插件核心代码

//获取下拉菜单的父元素容器
  function getParent($this) {
    //获取触发元素的&#39;data-target&#39;特性值，表示下拉菜单的父元素容器的选择器
    var selector = $this.attr(&#39;data-target&#39;)  
    //如果触发元素没有设置&#39;data-target&#39;
    if (!selector) {
      //获取触发元素的&#39;href&#39;特性值，表示下拉菜单的父元素容器的选择器
      selector = $this.attr(&#39;href&#39;)
      //该值是所弹出元素的id值
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, &#39;&#39;) // strip for ie7
    }
    //通过选择器，来获取下拉菜单的父元素容器
    var $parent = selector && $(selector)
    //如果找到，说明触发元素确实在下拉菜单外部，则返回找到的下拉菜单的父元素容器即可
    //如果没有找到，说明触发元素在下拉菜单内部，则返回它的直接父级元素
    return $parent && $parent.length ? $parent : $this.parent()
  }

  //关闭所有的下拉菜单
  function clearMenus(e) {
    //如果点击的是鼠标右键，则直接返回
    if (e && e.which === 3) return
    //删除用于移动设备的蒙版  
    $(backdrop).remove()
    //根据选择器，遍历所有的dropdown标记，然后全部关闭
    $(toggle).each(function () {
      var $this         = $(this)
      var $parent       = getParent($this)
      var relatedTarget = { relatedTarget: this }
      //如果下拉菜单的父元素容器没有open类名，则直接返回
      if (!$parent.hasClass(&#39;open&#39;)) return
      //如果触发了鼠标单击事件，并且鼠标事件的目标元素是input或textarea，则直接返回
      if (e && e.type == &#39;click&#39; && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
      //关闭前，触发hide事件
      $parent.trigger(e = $.Event(&#39;hide.bs.dropdown&#39;, relatedTarget))
      //如果阻止了默认行为，则直接返回
      if (e.isDefaultPrevented()) return
      $this.attr(&#39;aria-expanded&#39;, &#39;false&#39;)
      //关闭后，触发hidden事件
      $parent.removeClass(&#39;open&#39;).trigger($.Event(&#39;hidden.bs.dropdown&#39;, relatedTarget))
    })
  }
  
  //控制下拉菜单的打开、关闭操作
  Dropdown.prototype.toggle = function (e) {
    var $this = $(this)
    //如果有禁用标记，则不处理
    if ($this.is(&#39;.disabled, :disabled&#39;)) return
    //获取下拉菜单的父元素容器
    var $parent  = getParent($this)
    //判断下拉菜单的父元素容器是否有open样式
    var isActive = $parent.hasClass(&#39;open&#39;)
    //关闭所有的下拉菜单
    clearMenus()
    //如果是，在clearMenus阶段已经关闭了，所以不需要再次关闭
    //如果不是，说明默认是关闭状态，则需要展开下拉菜单
    if (!isActive) {
      //如果是移动设置，则使用dropdown-backdrop样式，因为移动设备不支持click单击委托
      if (&#39;ontouchstart&#39; in document.documentElement && !$parent.closest(&#39;.navbar-nav&#39;).length) {       
        $(document.createElement(&#39;div&#39;))
          .addClass(&#39;dropdown-backdrop&#39;)
          .insertAfter($(this))
          .on(&#39;click&#39;, clearMenus)
      }
      var relatedTarget = { relatedTarget: this }
      //展开下拉菜单前，触发show事件
      $parent.trigger(e = $.Event(&#39;show.bs.dropdown&#39;, relatedTarget))
      //如果阻止了默认行为，则直接返回
      if (e.isDefaultPrevented()) return

      $this
        //设置focus样式
        .trigger(&#39;focus&#39;)
        .attr(&#39;aria-expanded&#39;, &#39;true&#39;)

      $parent
        //设置open样式
        .toggleClass(&#39;open&#39;)
        //展开下拉菜单后，触发shown事件
        .trigger($.Event(&#39;shown.bs.dropdown&#39;, relatedTarget))
    }
    return false
  }

  //利用键盘控制下拉菜单
  Dropdown.prototype.keydown = function (e) {
    //如果按键不是esc、或上下方向键、或空格键，或者目标元素是input或textarea控件，则忽略处理
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
    var $this = $(this)
    //阻止默认行为及冒泡
    e.preventDefault()
    e.stopPropagation()
    //如果有禁用标记，则不做处理
    if ($this.is(&#39;.disabled, :disabled&#39;)) return
    //获取下拉菜单的父元素容器
    var $parent  = getParent($this)
    //判断父元素是否有open样式
    var isActive = $parent.hasClass(&#39;open&#39;)
    //如果有open样式并且按键不是向下箭头，或者没有open样式并且按键是向下箭头，也打开下拉菜单
    if (!isActive && e.which != 27 || isActive && e.which == 27) {
      //如果按下向下箭头，则给触发元素加上焦点
      if (e.which == 27) $parent.find(toggle).trigger(&#39;focus&#39;)
      //触发单击事件
      return $this.trigger(&#39;click&#39;)
    }
    //返回可以利用箭头选择的下拉菜单项
    //必须是可见的a链接，并且不包括分隔符
    var desc = &#39; li:not(.disabled):visible a&#39;
    var $items = $parent.find(&#39;.dropdown-menu&#39; + desc)
    //如果没有，则不做处理
    if (!$items.length) return
    //找出当前处理焦点状态的第一个下拉菜单项的索引
    var index = $items.index(e.target)
    //按向上箭头，index-1
    if (e.which == 38 && index > 0)                 index--        
    //按向下箭头，index+1 
    if (e.which == 40 && index < $items.length - 1) index++      
    //当index为-1时，置为0  
    if (!~index)                                    index = 0
    //给所选择的菜单项设置焦点
    $items.eq(index).trigger(&#39;focus&#39;)
  }
登录后复制

【4】jQuery插件定义

function Plugin(option) {
    //根据选择器，遍历所有符合规则的元素
    return this.each(function () {
      var $this = $(this)
      //获取自定义属性bs.dropdown的值
      var data  = $this.data(&#39;bs.dropdown&#39;)
      //如果值不存在，则将Dropdown实例设置为bs.dropdown值
      if (!data) $this.data(&#39;bs.dropdown&#39;, (data = new Dropdown(this)))
      //如果option传递了string，则表示要执行某个方法  
      if (typeof option == &#39;string&#39;) data[option].call($this)
    })
  }

  var old = $.fn.dropdown
  //保留其他库的$.fn.modal代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  $.fn.dropdown             = Plugin
  //重设插件构造器，可以通过该属性获取插件的真实类函数
  $.fn.dropdown.Constructor = Dropdown
登录后复制

【5】防冲突处理

$.fn.dropdown.noConflict = function () {
    //恢复以前的旧代码
    $.fn.dropdown = old
    //将$.fn.dropdown.noConflict()设置为Bootstrap的Dropdown插件
    return this
  }
登录后复制

【6】绑定触发事件

$(document)
    //为声明式的HTML绑定单击事件，在单击以后先关闭所有的下拉菜单
    .on(&#39;click.bs.dropdown.data-api&#39;, clearMenus)
    //如果内部有form元素，则阻止冒泡，不做其他处理
    .on(&#39;click.bs.dropdown.data-api&#39;, &#39;.dropdown form&#39;, function (e) { e.stopPropagation() })
    //绑定单击事件，执行toggle()方法
    .on(&#39;click.bs.dropdown.data-api&#39;, toggle, Dropdown.prototype.toggle)
    //绑定键盘keydown事件，执行keydown()方法
    .on(&#39;keydown.bs.dropdown.data-api&#39;, toggle, Dropdown.prototype.keydown)
    //为dropdown-menu绑定键盘keydown事件，执行keydown()方法
    .on(&#39;keydown.bs.dropdown.data-api&#39;, &#39;.dropdown-menu&#39;, Dropdown.prototype.keydown)
登录后复制

更多编程相关知识，请访问：编程入门！！

以上是深入浅出Bootstrap中的下拉菜单的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前 By DDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前 By DDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7700
15
Java教程
1640
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1230
29
显示更多
Related knowledge
bootstrap搜索栏怎么获取 bootstrap搜索栏怎么获取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

bootstrap垂直居中怎么弄 bootstrap垂直居中怎么弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

See all articles