下拉菜单--属性声明式方法（二)，玩转Bootstrap（JS插件篇）教程-慕课网

从上一节的两个示例，我们可以知道，用户只需要点击有向下三角形的按钮链接或者直接点击三角形就会弹出下拉菜单。实现这个效果，都是依赖于HTML相关元素自定义的属性完成。所以在编写HTML结构的时候必须满足下面的规则：

☑ 按照制作菜单的结构编写结构，如前面“下拉菜单”一节(5-21)所介绍

☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"

<div class="navbar navbar-default" id="navmenu">
    <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>
                 ...
            </ul>
        </li>
        <li><a href="##">前端论坛</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>

实现下拉菜单原理：

Dropdown插件加载时，对所有带有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时，会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类名，此时下拉菜单将隐藏。

简单的说，要制作下拉菜单，其结构基本如下：

<div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜单触发器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"：

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

下拉菜单--属性声明式方法（二)

任务