Menu lungsur Bootstrap


Bootstrap Pemalam menu lungsur turun (Dropdown)

Menu lungsur Bootstrap Bab ini menerangkan menu lungsur turun, tetapi tidak melibatkan bahagian interaksi Bab ini akan menerangkan interaksi menu lungsur secara terperinci. Menggunakan pemalam Dropdown, anda boleh menambah menu dropdown pada mana-mana komponen (seperti bar navigasi, halaman tab, menu navigasi kapsul, butang, dll.).

Jika anda ingin merujuk kefungsian pemalam secara berasingan, maka anda perlu merujuk dropdown.js. Sebagai alternatif, seperti yang dinyatakan dalam bab Gambaran Keseluruhan Plugin Bootstrap, anda boleh merujuk bootstrap.js atau versi kecil bootstrap.min.js.

Penggunaan

Anda boleh menukar kandungan tersembunyi menu lungsur turun (Turun) pemalam:

  • melalui atribut data : pada pautan atau butang tambah data-toggle="dropdown" untuk menogol menu lungsur turun, seperti yang ditunjukkan di bawah:

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

  • Jika anda perlukan untuk memastikan Untuk memastikan pautan lengkap (berguna apabila penyemak imbas tidak mendayakan JavaScript), sila gunakan atribut data-target dan bukannya href="#":

<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html ">
Menu lungsur (Turun) <span class="caret"></span>
</a>


<ul class="dropdown -menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>

  • melalui JavaScript: Untuk memanggil togol menu lungsur turun melalui JavaScript, sila gunakan kaedah berikut:

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

Contoh

Dalam bar navigasi

Contoh berikut menunjukkan penggunaan drop-down menu dalam bar navigasi:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的导航栏</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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>
</nav>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Dalam tab

Contoh berikut menunjukkan penggunaan menu lungsur dalam tab:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Options

Tiada pilihan.

Kaedah

Togol menu lungsur turun Terdapat kaedah mudah untuk menunjukkan atau menyembunyikan menu lungsur turun.

$().dropdown('togol')

Contoh

Contoh berikut menunjukkan penggunaan pemalam menu lungsur (Turun Turun)- dalam kaedah:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单（Dropdown）插件方法</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</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>
   </nav>
</div>
<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
      }); 
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian