suchen

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

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

WBOY
WBOYOriginal
2016-06-24 11:56:471077Durchsuche

案例

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

 

用于导航条

 

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

[javascript]  view plaincopy

  2.  
      
  3.    
  4.      Toggle navigation  
  5.        
  6.        
  7.        
  8.      
  9.    Brand  
  10.  
  
  •   
  •  
      
  •    
        
  •      
  • 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>

     

    用法二--通过JavaScript

     

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

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

     

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

     

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

     

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

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

    Stellungnahme：
    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
    Vorheriger Artikel：一款纯css3实现的动画加载导航_html/css_WEB-ITnoseNächster Artikel：问题：关于一个坛友的html布局实现_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen