communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel d'amorçage > Une introduction simple aux menus déroulants dans Bootstrap

Une introduction simple aux menus déroulants dans Bootstrap

青灯夜游
Libérer： 2021-06-22 11:10:40
avant
2764 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée au menu déroulant dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une introduction simple aux menus déroulants dans Bootstrap

Lors de l'interaction avec des pages Web, des menus contextuels ou des éléments de menu masqués/affichés sont souvent nécessaires. Bootstrap fournit par défaut un menu contextuel commutable pour afficher une liste de liens. De plus, l'affichage du menu dans différents états interactifs doit être utilisé conjointement avec le plug-in javascript. [Recommandations associées : "Tutoriel bootstrap"]

Comment utiliser

Lorsque vous utilisez le menu déroulant du framework Bootstrap, vous devez appelez le menu déroulant fourni par le fichier bootstrap.js du framework Bootstrap. Bien sûr, si vous utilisez la version non compilée, vous pouvez trouver un fichier nommé "dropdown.js" dans le dossier js, et vous pouvez également appeler ce fichier js

car les effets d'interaction des composants de Bootstrap dépendent tous de A plug-in écrit par la bibliothèque jQuery, donc jquery.js doit être chargé avant d'utiliser bootstrap.js pour produire des effets 

<!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>
Copier après la connexion

Utilisation de base

Lors de l'utilisation du framework Bootstrap Lors de l'utilisation d'un composant de menu déroulant, il est très important d'utiliser correctement sa structure. Si la structure et le nom de la classe ne sont pas utilisés correctement, cela affectera directement si le composant peut être utilisé normalement

1. Utiliser. un conteneur nommé "dropdown" Enveloppe l'intégralité de l'élément du menu déroulant 

<div class="dropdown"></div>
Copier après la connexion

2. Utilisez un bouton

Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

[Titre du menu]

Vous pouvez ajouter un titre pour indiquer un ensemble d'actions dans n'importe quel menu déroulant 

<li class="dropdown-header">Dropdown header</li>
Copier après la connexion
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}
Copier après la connexion
<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>
Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

【Alignement】

Liste déroulante dans le Cadre d'amorçage Le menu est aligné à gauche par défaut. Si vous souhaitez que le menu déroulant soit aligné à droite par rapport au conteneur parent, vous pouvez ajouter un nom de classe "dropdown-menu-right" à "dropdown-menu" <. 🎜>

.dropdown-menu-right {
  right: 0;
  left: auto;
}
Copier après la connexion

Depuis
La valeur par défaut est un élément de niveau bloc, qui remplit la largeur du parent. Ici, vous devez définir inline-block et margin-left pour l'élément afin que son contenu s'étende sur la largeur et soit à une certaine distance de la gauche 

    display: inline-block;
    margin-left: 60px;
Copier après la connexion
<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>
Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

[Élément de menu statut]

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

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
Copier après la connexion

　　下拉菜单项除了上面两种状态，还有当前状态（.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>
Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

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>
Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

【toggle】

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

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

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})
Copier après la connexion

【事件订阅】

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

show.bs.dropdown 在show方法调用时立即触发(尚未显示之前)
shown.bs.dropdown 在下拉菜单完全显示给用户之后(并且等CSS动画完成之后)触发
hide.bs.dropdown 在hide方法调用时(但还未关闭隐藏)立即触发
hidden.bs.dropdown 在下拉菜单完全隐藏之后(并且等CSS动画完成之后)触发
Copier après la connexion
<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>
Copier après la connexion

Une introduction simple aux menus déroulants dans Bootstrap

JS源码

【1】IIFE

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

+function ($) {
    //使用es5严格模式
    &#39;use strict&#39;;
    //
}(window.jQuery);
Copier après la connexion

【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;
Copier après la connexion

【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;)
  }
Copier après la connexion

【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
Copier après la connexion

【5】防冲突处理

$.fn.dropdown.noConflict = function () {
    //恢复以前的旧代码
    $.fn.dropdown = old
    //将$.fn.dropdown.noConflict()设置为Bootstrap的Dropdown插件
    return this
  }
Copier après la connexion

【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)
Copier après la connexion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
bootstrap 下拉菜单
source：cnblogs.com
Article précédent：Comment charger du contenu à distance dans la fenêtre modale Bootstrap ? Présentation de la méthode à distance Article suivant：Une brève discussion sur la façon d'utiliser les composants Bootstrap Blazor
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...
Depuis 2024-04-05 08:45:39
0
1
3443
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal