Heim > Web-Frontend > HTML-Tutorial > Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:56:47
Original
1067 Leute haben es durchsucht

案例

通过此插件可以为几乎所有东西添加下拉菜单,包括导航条、标签页、胶囊式按钮。

 

用于导航条

 

导航条分为四个部分。第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列。

[javascript]  view plaincopy

  1.  
      
  2.    
  3.      Toggle navigation  
  4.        
  5.        
  6.        
  7.      
  8.    Brand  
  9.  
  
  •   
  •  
      
  •    
        
  •      
  • Link
  •   
  •      
  • Link
  •   
  •      
  •   
  •        Dropdown   
  •        
        
  •          
  • Action
  •   
  •          
  • Another action
  •   
  •          
  • Something else here
  •   
  •          
  •   
  •          
  • Separated link
  •   
  •          
  •   
  •          
  • One more separated link
  •   
  •          
  •      
  •   
  •      
  •    
      
  •      
      
  •          
  •      
  •   
  •        
  •      
  •    
        
  •      
  • Link
  •   
  •      
  •   
  •        Dropdown   
  •        
        
  •          
  • Action
  •   
  •          
  • Another action
  •   
  •          
  • Something else here
  •   
  •          
  •   
  •          
  • Separated link
  •   
  •          
  •      
  •   
  •      
  •  
  •   
  • lt;/nav>  
  • 效果就是

     

    用法一--通过data属性

     

    通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

          <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>        <ul class="dropdown-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</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>
    Nach dem Login kopieren

    用法二--通过JavaScript

    通过JavaScript打开或关闭下拉菜单:

    删除data-toggle属性,那么再次点击就不会出现下来菜单了,接下来我们通过给这个a标签添加一个onclick事件。

    <script type="text/javascript">     function Test()    {        $('#myDropDown').dropdown();        } </script>
    Nach dem Login kopieren

    然后点击a标签就可以出现下拉菜单了。

    可以绑定事件,然后在元素进行相应处理的时候会自动绑定到元素,并进行执行相关的代码。

    $('#myDropdown').on('show.bs.dropdown', function () {  // 在显示的时候做一些处理代码})
    Nach dem Login kopieren

    Verwandte Etiketten:
    Quelle:php.cn
    Vorheriger Artikel:一款纯css3实现的动画加载导航_html/css_WEB-ITnose Nächster Artikel:问题:关于一个坛友的html布局实现_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage