Home > Article > Web Front-end > JS component Bootstrap implements drop-down menu effect code_javascript skills

JS component Bootstrap implements drop-down menu effect code_javascript skills

WBOYOriginal: 2016-05-16 15:03:391580browse

Bootstrap drop-down menu This chapter explains the drop-down menu, but does not involve the interaction part. This chapter will explain the interaction of the drop-down menu in detail. Using the Dropdown plugin, you can add a dropdown menu to any component (such as navigation bar, tab page, capsule navigation menu, button, etc.).

If you want to reference the functionality of this plugin separately, then you need to reference dropdown.js. Alternatively, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or a minified version of bootstrap.min.js.

1. Usage
You can toggle the hidden content of the Dropdown plugin:

1. Through the data attribute: add data-toggle="dropdown" to the link or button to toggle the drop-down menu, as shown below:

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

If you need to keep the link intact (useful when the browser does not enable JavaScript), use the data-target attribute instead of 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>

2. Through JavaScript: To call the drop-down menu switching through JavaScript, please use the following method:
$('.dropdown-toggle').dropdown()

2. Simple example of drop-down menu
In normal use, the code is the same as the component method:

//声明式用法

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown">
     下拉菜单
     <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>

Key core of declarative usage:
1. Use class="dropdown" to wrap peripheral containers;
2. Internal click button event binding data-toggle="dropdown";
3. Use class="dropdown-menu" for menu elements.

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

The drop-down menu supports 4 types of events, corresponding to before pop-up, after pop-up, before closing and after closing.

//事件，其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
  alert('在调用 show 方法时立即触发！');
});

3. How to use the drop-down menu in the tab page

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     Java <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Swing</a></li>
     <li><a href="#">jMeter</a></li>
     <li><a href="#">EJB</a></li>
     <li class="divider"></li>
     <li><a href="#">分离的链接</a></li>
   </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>

Rendering:

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of Bootstrap scroll monitoring (Scrollspy) plug-in_javascript skillsNext article：Detailed explanation of Bootstrap scroll monitoring (Scrollspy) plug-in_javascript skills

See more

JS component Bootstrap implements drop-down menu effect code_javascript skills

Related articles