当前位置:Gxlcms > html代码 > Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:40人阅读

案例

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

用于导航条

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

[javascript] view plaincopy

  1. Toggle navigation
  2. Brand
  • lt;/nav>
  • 效果就是

    用法一--通过data属性

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

          

    用法二--通过JavaScript

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

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

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

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

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

    人气教程排行