Rumah > hujung hadapan web > html tutorial > Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:56:47
asal
1064 orang telah melayarinya

案例

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

 

用于导航条

 

导航条分为四个部分。第一部分导航头,第二部分导航列,第三部分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>
    Salin selepas log masuk

    用法二--通过JavaScript

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

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

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

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

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

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

    Label berkaitan:
    sumber:php.cn
    Artikel sebelumnya:一款纯css3实现的动画加载导航_html/css_WEB-ITnose Artikel seterusnya:问题:关于一个坛友的html布局实现_html/css_WEB-ITnose
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan