• 【2018夏季达沃斯】未来就业报告发布:机器将比人更“能干” 哪些职位更“吃香”? 2018-09-19
  • 西安市民:本想买点香菜吃火锅?比较后还是买了些肉 2018-09-19
  • 安吉发布乡村治理标准规范 2018-09-19
  • 华北能源监管局开展电网运行风险管控专项督查 2018-09-18
  • 马来西亚新山依斯干达特区吸资2531亿马币 ——凤凰网房产马来西亚 2018-09-18
  • 繁星戏剧挑战浸没式独角戏 2018-09-18
  • 领导干部自然资源资产离任审计制度试点 让福建省光泽县绿意盎然(图)-地方新闻-时政频道-中工网 2018-09-08
  • 人民日报评留美生数落父母:为亲情拓对话空间 2018-09-07
  • 网友给四川省委书记、省长留言获回复 共计25条 2018-09-07
  • 娱乐城新优惠 2018-09-06
  • 无人售货架现身出租车内 乘客扫码付款随时取走零食 2018-09-06
  • 江西公布拖欠劳动报酬典型案例 最高拖欠近200万元 2018-09-06
  • 做学习宣传贯彻人民领袖思想的排头兵 2018-09-06
  • 华夏幸福荣获2018中国品牌先锋大奖之杰出企业奖 2018-09-05
  • 10大路口因礼让斑马线致堵 济南交警推新规约束行人 ——凤凰网房产济南 2018-09-05
  • 【bootstrap教程】Bootstrap 下拉菜单(Dropdown)插件

    栏目: bootstrap 发布于: 2014-11-28 12:57:51

    Bootstrap 下拉菜单(Dropdown)插件

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。

    如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js?;蛘?,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

    用法

    您可以切换下拉菜单(Dropdown)插件的隐藏内容:

    • 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:
      <div class="dropdown">
        <a data-toggle="dropdown" rel="nofollow" href="#">下拉菜单(Dropdown)触发器</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          ...
        </ul>
      </div>
      

      如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 rel="nofollow" href="#"

      <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" rel="nofollow" href="http://www.rocksun.cn/page.html">
          下拉菜单(Dropdown) <span class="caret"></span>
        </a>
      
      
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          ...
        </ul>
      </div>
      
    • 通过 JavaScript:通过 JavaScript 调用下拉菜单切换,请使用下面的方法:
      $('.dropdown-toggle').dropdown()
      

    实例

    在导航栏内

    下面的实例演示了在导航栏内的下拉菜单的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 默认的导航栏</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" rel="nofollow" href="#">W3Cschool</a>
       </div>
       <div>
          <ul class="nav navbar-nav">
             <li class="active"><a rel="nofollow" href="#">iOS</a></li>
             <li><a rel="nofollow" href="#">SVN</a></li>
             <li class="dropdown">
                <a rel="nofollow" href="#" class="dropdown-toggle" data-toggle="dropdown">
                   Java 
                   <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                   <li><a rel="nofollow" href="#">jmeter</a></li>
                   <li><a rel="nofollow" href="#">EJB</a></li>
                   <li><a rel="nofollow" href="#">Jasper Report</a></li>
                   <li class="divider"></li>
                   <li><a rel="nofollow" href="#">分离的链接</a></li>
                   <li class="divider"></li>
                   <li><a rel="nofollow" href="#">另一个分离的链接</a></li>
                </ul>
             </li>
          </ul>
       </div>
    </nav>
    
    </body>
    </html>
    

    结果如下所示:

    默认的导航栏

    在标签页内

    下面的实例演示了在标签页内的下拉菜单的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <p>带有下拉菜单的标签页</p>
    <ul class="nav nav-tabs">
       <li class="active"><a rel="nofollow" href="#">Home</a></li>
       <li><a rel="nofollow" href="#">SVN</a></li>
       <li><a rel="nofollow" href="#">iOS</a></li>
       <li><a rel="nofollow" href="#">VB.Net</a></li>
       <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" rel="nofollow" href="#">
             Java <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
             <li><a rel="nofollow" href="#">Swing</a></li>
             <li><a rel="nofollow" href="#">jMeter</a></li>
             <li><a rel="nofollow" href="#">EJB</a></li>
             <li class="divider"></li>
             <li><a rel="nofollow" href="#">分离的链接</a></li>
          </ul>
       </li>
       <li><a rel="nofollow" href="#">PHP</a></li>
    </ul>
    
    </body>
    </html>
    

    结果如下所示:

    带有下拉菜单的标签页

    选项

    没有选项。

    方法

    下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

    $().dropdown('toggle')
    

    实例

    下面的实例演示了下拉菜单(Dropdown)插件方法的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 下拉菜单(Dropdown)插件方法</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" rel="nofollow" href="#">W3Cschool</a>
       </div>
    
       <div id="myexample">
          <ul class="nav navbar-nav">
             <li class="active"><a rel="nofollow" href="#">iOS</a></li>
             <li><a rel="nofollow" href="#">SVN</a></li>
             <li class="dropdown">
                <a rel="nofollow" href="#" class="dropdown-toggle">Java <b 
                   class="caret"></b></a>
                   <ul class="dropdown-menu">
                      <li><a id="action-1" rel="nofollow" href="#">
                         jmeter</a>
                      </li>
                      <li><a rel="nofollow" href="#">EJB</a></li>
                      <li><a rel="nofollow" href="#">Jasper Report</a></li>
                      <li class="divider"></li>
                      <li><a rel="nofollow" href="#">分离的链接</a></li>
                      <li class="divider"></li>
                      <li><a rel="nofollow" href="#">另一个分离的链接</a></li>
                   </ul>
                </li>
             </ul>
          </div>
       </nav>
    </div>
    <script>
       $(function(){
          $(".dropdown-toggle").dropdown('toggle');
          }); 
    </script>
    
    </body>
    </html>
    

    结果如下所示:

    下拉菜单(Dropdown)插件方法

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【bootstrap教程】Bootstrap 下拉菜单(Dropdown)插件
    IT技术书籍推荐:
    细说PHP(精要版)
    细说PHP(精要版)
    高洛峰 (作者), LAMP兄弟连 (编者)
    PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点?!断杆礟HP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。