Bootstrap - Plugin thả xuống

Sử dụng plugin thả xuống, bạn có thể thêm menu thả xuống cho bất kỳ thành phần nào như thanh điều hướng, tab, viên thuốc và nút.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần dropdown.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .

Sử dụng

Bạn có thể chuyển đổi nội dung ẩn của plugin thả xuống -

• Via data attributes - Thêm data-toggle = "dropdown" vào một liên kết hoặc nút để chuyển đổi một menu thả xuống như được hiển thị bên dưới -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>

• Nếu bạn cần giữ nguyên các liên kết (điều này hữu ích nếu trình duyệt không bật JavaScript), hãy sử dụng data-target thuộc tính thay vì 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 - Để gọi trình đơn thả xuống chuyển đổi qua JavaScript, hãy sử dụng phương pháp sau:

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

Thí dụ

Within Navbar

Ví dụ sau minh họa việc sử dụng menu thả xuống trong thanh điều hướng:

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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 = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
      </ul>
   </div>
   
</nav>

Within Tabs

Ví dụ sau minh họa việc sử dụng menu thả xuống trong các tab:

<p>Tabs With Dropdown Example</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 = "#">Separated link</a></li>
      </ul>
      
   </li>
	
   <li><a href = "#">PHP</a></li>
</ul>

Tùy chọn

Không có lựa chọn nào.

Phương pháp

Công cụ chuyển đổi thả xuống có một phương pháp đơn giản để hiển thị hoặc ẩn danh sách thả xuống.

$().dropdown('toggle')

Thí dụ

Ví dụ sau minh họa việc sử dụng phương pháp plugin thả xuống.

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</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">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 = "#">Separated link</a></li>
               
               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>
            
         </li>
			
      </ul>
   </div>
   
</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   }); 
</script>