5.4 Bootstrap drop-down menu (Dropdown) plugin

---

Bootstrap drop-down menu (Dropdown) plugin

This chapter of Bootstrap drop-down menu 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. With the Dropdown plugin, you can add a dropdown menu to any component (such as navbars, tabs, capsule navigation menus, buttons, etc.).

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

usage

You can toggle the hidden content of the Dropdown plugin:

• Toggle the dropdown menu by adding data-toggle="dropdown" to the link or button via the data attribute, like this:

  <div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      ...
    </ul>
  </div>
  
  如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 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>
  

  

• Via JavaScript: To call the drop-down menu switch via JavaScript, please use the following method:

  $('.dropdown-toggle').dropdown()
  

example

in the navigation bar

The following example demonstrates the usage of the drop-down menu in the navigation bar:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">梁辰兴</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

The result looks like this:

in a tab

The following example demonstrates the usage of a drop-down menu within a tab:

<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>

The result looks like this:

options

There are no options.

method

The dropdown toggle has a simple method to show or hide the dropdown.

$().dropdown('toggle')

example

The following example demonstrates the usage of the Dropdown plugin method:

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">CSDN</a>
    </div>
    <div id="myexample">
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="#">iOS</a>
            </li>
            <li>
                <a href="#">SVN</a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a id="action-1" href="#">jmeter</a>
                    </li>
                    <li>
                        <a href="#">EJB</a>
                    </li>
                    <li>
                        <a href="#">Jasper Report</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">分离的链接</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">另一个分离的链接</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
</div>
<script>
$(function() {
      
      
    $(".dropdown-toggle").dropdown('toggle');
});
</script>

The result looks like this: