bootstrap下拉菜单使用方法解析

2019-11-19 17:56:58

字体：大中小

来源：转载

供稿：网友

Bootstrap框架中的下拉菜单组件是一个独立的组件，具体来学习一下

下拉菜单（Dropdown）

☑ LESS版本：对应的源文件dropdowns.less

<h3>示例1</h3><div class="navbar navbar-default" id="navmenu">  <a href="##" class="navbar-brand">W3cplus</a>  <ul class="nav navbar-nav">    <li class="dropdown">      <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>      <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">        <li role="presentation"><a href="##">CSS3</a></li>        <li role="presentation"><a href="##">HTML5</a></li>        <li role="presentation"><a href="##">Sass</a></li>      </ul>    </li>    <li><a href="##">前端论坛</a></li>    <li><a href="##">关于我们</a></li>  </ul></div><h3>示例2</h3><ul class="nav nav-pills">  <li class="dropdown">    <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">      <li role="presentation"><a href="##">CSS3</a></li>      <li role="presentation"><a href="##">HTML5</a></li>      <li role="presentation"><a href="##">Sass</a></li>    </ul>  </li>  <li class="active"><a href="##">前端论坛</a></li>  <li><a href="##">关于我们</a></li></ul><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>

下拉菜单属性声明式方法（一）

☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle=”dropdown”
实现下拉菜单原理：

Dropdown插件加载时，对所有带有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时，会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类名，此时下拉菜单将隐藏。

下接菜单结构:

<div class="dropdown">  <a data-toggle="dropdown" href="#">下拉菜单触发器</a>  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>

如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"

<div class="dropdown">  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div><ul class="nav nav-pills">  <li><a href="##">教程</a></li>  <li class="active"><a href="##">前端论坛</a></li>  <li class="dropdown">    <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们</a>        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">        <li role="presentation"><a href="##">CSS3</a></li>        <li role="presentation"><a href="##">HTML5</a></li>        <li role="presentation"><a href="##">Sass</a></li>     </ul>  </li></ul>

下拉菜单JavaScript触发方法

<ul class="nav nav-pills">  <li class="dropdown">    <a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">      <li role="presentation"><a href="##">CSS3</a></li>      <li role="presentation"><a href="##">HTML5</a></li>      <li role="presentation"><a href="##">Sass</a></li>    </ul>  </li>  <li class="active"><a href="##">前端论坛</a></li>  <li><a href="##">关于我们</a></li></ul><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script>  $(function(){  $(".dropdown-toggle").dropdown();})  </script>//显示下拉菜单：$(function(){  $(".dropdown-toggle").dropdown("toggle");})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：微信小程序页面之间传参实例详解

下一篇：js数组与字符串常用方法总结