怎么开发网站

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

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

下拉菜单

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

用于导航条

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

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

 nav class="navbar navbar-default" role="navigation"
  div class="navbar-header"
    button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myCollapse"
      span class="sr-only"Toggle navigation/span      span class="icon-bar"/span
      span class="icon-bar"/span
      span class="icon-bar"/span
    /button
    a class="navbar-brand" href="#"Brand/a
  /div
  div class="collapse navbar-collapse" id="myCollapse"
    ul class="nav navbar-nav" 
     li class="active"a href="#"Link/a/li
      lia href="#"Link/a/li
      li class="dropdown"
        a href="#" class="dropdown-toggle" data-toggle="dropdown"Dropdown b class="caret"/b/a 
       ul class="dropdown-menu"
     手机wap网站建设      lia href="#"Action/a/li 
          lia href="#"Another 天津宁河网站建设公司 action/a/li 
          lia href="#"Something else here/a/li
          li class="divider"/li 
         lia href="#"Separated link/a/li
          li class="divider"/li
          lia href="#"One more separated link/a/li
        /ul
      /li
    /ul
    form class="navbar-form navbar-left" role="search"
      div class="form-group"
        input type="text" class="form-control" placeholder="Search"
      /div
      button type="submit" class="btn btn-default"Submit/button
    /form
    ul class="nav navbar-nav 怎么开发网站 navbar-right"
      lia href="#"Link/a/li
      li class="dropdown"
        a href="#" class="dropdown-toggle" data-toggle="dropdown"Dropdown b class="caret"/b/a
        ul class="dropdown-menu"
          lia href="#"Action/a/li
          lia href="#"Another action/a/li
          lia href="#"Something else here/a/li
          li class="divider"/li
          lia href="#"Separated link/a/li
        /ul
      /li
    /ul
  /div
/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"
          lia href="#"Action/a/li
          lia href="#"Another action/a/li 
         lia href="#"Something else here/a/li
          li class="divider"/li
          lia href="#"Separated link/a/li 
         li class="divider"/li
          lia href="#"One more separated link/a/li
        /ul
      /li

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

用法二--通过JavaScript

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

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

a href="#" class="dropdown-toggle" id="myDropDown" data-toggle="" onClick="Test()"Dropdown b class="caret"/b/a

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

script type="text/javascript" function Test()

{

$('#myDropDown').dropdown();

}

/script

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

事件

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

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

总结

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