站长之家 - 经验 2015-04-10T09:47:31 +08:00

Bootstrap3.0学习教程十八:JavaScript插件下拉菜单

完整教学可查看:Bootstrap3.0教程

本文主要来学习一下JavaScript插件--下拉菜单。

下拉菜单

通过此插件可以为几乎所有东西添加下拉菜单,包括导航条、标签页、胶囊式按钮,本文主要来介绍下导航条里面的下拉菜单吧,其实道理都是一样的。

用于导航条

先来看一下之前做过的一个简单的导航条

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

 class="navbar navbar-default" role="navigation">
class="navbar-header">
"button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse">
class="sr-only">Toggle navigation class="icon-bar">
class="icon-bar">
class="icon-bar">

Brand

class="collapse navbar-collapse" id="myCollapse">

class="navbar-form navbar-left" role="search">
class="form-group">
"text" class="form-control" placeholder="Search">

"submit" class="btn btn-default">Submit



用法一--通过data属性

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

      
  • class="dropdown">
    Dropdown class="caret">

  • 即上面的那个小例子就是如此。

    用法二--通过JavaScript

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

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

    Dropdown class="caret">

    并添加相应的JavaScript的函数代码

    • "text/javascript"> function Test()
    •   {
    •      $('#myDropDown').dropdown();
    •   }

    就这样保存,然后F5刷新页面重新点击,就可以看到下拉菜单了(不过这里不太清楚为什么要点击两次下拉菜单才会出来)。

    事件

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

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

    总结

    看似很简单的东西,有时候实践起来还是有难度的,多实践肯定不会错。

    推荐关键词

    24小时热搜

    查看更多内容

    大家正在看

    元宇宙,倒在App store

    Oculus登顶App Store