zoukankan      html  css  js  c++  java
  • BootStrap学习笔记JS插件(二)--下拉菜单

    一、属性声明方式

    1.1 默认模式

    <div class="navbar navbar-default" id="navmenu">  //大DIV
        <a href="##" class="navbar-brand">W3cplus</a>  //导航名称
        <ul class="nav navbar-nav">                                  
            <li class="dropdown">             //导航一
                <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>                       
                <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                    <li role="presentation"><a href="##">CSS3</a></li>
                    <li role="presentation"><a href="##">HTML5</a></li>
                    <li role="presentation"><a href="##">Sass</a></li>
                </ul>
            </li>
            <li><a href="##">前端论坛</a></li>  //导航二
            <li><a href="##">关于我们</a></li>  //导航三
        </ul>
    </div>

    结果如下图:

    1.2 胶囊模式

    <h3>示例2</h3>
    <ul class="nav nav-pills">
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>
        </li>
        <li class="active"><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>

    结果如下:

    二、js触发方式

    删除a标签里的data-toggle="dropdown"。在javascript里写上

    $(function(){
        $(".dropdown-toggle").dropdown();
    })

    $(function(){
        $(".dropdown-toggle").dropdown("toggle");
    })

    $(".dropdown-toggle").one("click",function(){
        $(this).dropdown("toggle");
    })

    暂时还未领悟这三种有什么区别。

  • 相关阅读:
    编程爱好者论坛第六次编程比赛题目
    google china code jam round2 div1 1000分题
    ogl2dlibsdl cvs repository @ cosoft
    偶尔也提一个游戏点子:宇宙碰撞
    今天看到一些笑话...
    google china code jam入围赛的一个题
    用Regular expression寻找源代码中的汉字字符串
    生成函数理论初步
    Komodo 的中文支持
    “豪华版”的USB延长线
  • 原文地址:https://www.cnblogs.com/shanoon/p/5377336.html
Copyright © 2011-2022 走看看