Bootstrap implements drop-down menu effect_javascript skills

Dropdown Menu A toggleable, contextual menu for displaying a list of links.

1. Case

Wrap the drop-down menu trigger and drop-down menu in .dropdown, and then add the HTML code that makes up the menu.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

You can find from the above code that there may be many unfamiliar style classes or attributes in it.

A Dropdown button and a small icon caret on the right side. Of course, the text of this small icon and the button are at the same level.

First of all, see that there is a dropdown-toggle in the button button, and there is also a data-toggle attribute. Based on this attribute, the dropdown list will pop up.

The dropdown-menu immediately following the ul tag should be used in conjunction with the style class dropdown-toggle of the button button above, and the button button above is bound by aria-labelledby.

There is a divider in the fourth li tag, which is actually a style class for dividing lines.

This is probably what I understand, and my understanding is definitely not in place.

2. Alignment options

Add .text-right to the dropdown menu .dropdown-menu to right-align the text.

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Just add a text-right style class to the ul tag in the above code.

3. Title

A group of actions can be identified in any drop-down menu by adding a title.

 <h1 id="下拉菜单">下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

Mainly added

Dropdown header

There is a .dropdown-header style class in it.

4. Disabled menu items

Add .disabled disable link to

in the drop-down menu.

Continue to modify the above code and replace the code in the Something else here line

Copy code The code is as follows:

Something else here