Bootstrap - Açılır Eklenti

Açılır menü eklentisini kullanarak gezinti çubukları, sekmeler, haplar ve düğmeler gibi herhangi bir bileşene açılır menüler ekleyebilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak dropdown.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Açılır eklentinin gizli içeriğini değiştirebilirsiniz -

  • Via data attributes - Ekle data-toggle = "dropdown" aşağıda gösterildiği gibi bir açılır listeyi değiştirmek için bir bağlantıya veya düğmeye -

<div class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</div>
  • Bağlantıları sağlam tutmanız gerekiyorsa (bu, tarayıcı JavaScript'i etkinleştirmiyorsa kullanışlıdır), data-target yerine öznitelik 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 - JavaScript aracılığıyla açılır geçişi çağırmak için aşağıdaki yöntemi kullanın -

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

Misal

Within Navbar

Aşağıdaki örnek, bir gezinme çubuğu içindeki açılır menünün kullanımını göstermektedir -

<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

Aşağıdaki örnek, sekmelerdeki açılır menünün kullanımını göstermektedir -

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

Seçenekler

Seçenek yok.

Yöntemler

Açılır menü geçişinin, açılır menüyü göstermek veya gizlemek için basit bir yöntemi vardır.

$().dropdown('toggle')

Misal

Aşağıdaki örnek, açılır eklenti yönteminin kullanımını göstermektedir.

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