首页 > web前端 > html教程 > Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:56:47
原创
1055 人浏览过

案例

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

 

用于导航条

 

导航条分为四个部分。第一部分导航头,第二部分导航列,第三部分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>
    登录后复制

    用法二--通过JavaScript

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

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

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

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

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

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

    相关标签:
    来源:php.cn
    上一篇:一款纯css3实现的动画加载导航_html/css_WEB-ITnose 下一篇:问题:关于一个坛友的html布局实现_html/css_WEB-ITnose
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板