欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2023-12-22 18:25:52
...

案例

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

用于导航条

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

[javascript] view plaincopy

  4. Toggle navigation
  9. Brand
    • 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"可以打开或关闭下拉菜单。
      • Dropdown

        • 用法二--通过JavaScript

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

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

           
         
           
        然后点击a标签就可以出现下拉菜单了。
           
           
         
           
        可以绑定事件，然后在元素进行相应处理的时候会自动绑定到元素，并进行执行相关的代码。
           
            
        

        $('#myDropdown').on('show.bs.dropdown', function () {  // 在显示的时候做一些处理代码})
        					
															
        
						相关标签：												
							js						
												
							bootstrap						
												
							插件						
												
							学习						
												
							下拉菜单						
											
        
															
        
						
        
							上一篇：							
															
						
        
						
        
							下一篇：							
															
						
        
					
        
															
        
						
        
							推荐阅读