С помощью Dropdown-плагина вы можете добавлять выпадающие меню для любых компонентов, таких как navbars, вкладки, pills и кнопки.

Применение

Вы можете переключать скрытый контент выпадающего плагина -

  • Через атрибуты данных - добавьте data-toggle = "dropdown" в ссылку или кнопку для переключения выпадающего меню, как показано ниже -
    <div class = "dropdown">
       <a data-toggle = "dropdown" href = "#">Dropdown trigger</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>
    
  • С помощью JavaScript - Чтобы вызвать выпадающий тумблер с помощью JavaScript, используйте следующий метод -
    $('.dropdown-toggle').dropdown()
    

Внутри Navbar

Следующий пример демонстрирует использование выпадающего меню в навигационной панели -

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

Внутри вкладок

Следующий пример демонстрирует использование выпадающего меню в пределах вкладок -

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

Методы

Выпадающий переключатель имеет простой способ показать или скрыть раскрывающийся список. Следующий пример демонстрирует использование метода выпадающего плагина.

$().dropdown('toggle')



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok