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");
})

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