С помощью 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')

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




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok