使用下拉菜单需要加载element模块，可通过下列方式加载

//加载element模块 auxui(['element'], function (){ //加载后执行一些动作和事件处理 });

实例

在导航栏内

<nav class="navbar navbar-default navbar-static"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> <span class="sr-only">切换</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">AuxUi</a> </div> <div class="collapse navbar-collapse bs-example-js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 帮助中心 <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="drop1"> <li><a href="#">关于我们</a></li> <li><a href="#">框架介绍</a></li> <li><a href="#">使用说明</a></li> <li role="separator" class="divider"></li> <li><a href="#">官方网站</a></li> </ul> </li> <li class="dropdown"> <a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 会员中心 <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="drop2"> <li><a href="#">个人资料</a></li> <li><a href="#">账户设置</a></li> <li role="separator" class="divider"></li> <li><a href="#">我的作品</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li id="fat-menu" class="dropdown"> <a id="drop3" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 资料下载 <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="drop3"> <li><a href="#">Java</a></li> <li><a href="#">数据挖掘</a></li> <li><a href="#">数据通信/网络</a></li> <li role="separator" class="divider"></li> <li><a href="#">更多</a></li> </ul> </li> </ul> </div> </div> </nav>


<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">首页</a></li> <li role="presentation" class="dropdown"> <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">资料下载<span class="caret"></span></a> <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4"> <li><a href="#">Java</a></li> <li><a href="#">数据挖掘</a></li> <li><a href="#">数据通信/网络</a></li> <li role="separator" class="divider"></li> <li><a href="#">更多</a></li> </ul> </li> <li role="presentation" class="dropdown"> <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">会员中心<span class="caret"></span></a> <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5"> <li><a href="#">注册</a></li> <li><a href="#">登录</a></li> <li><a href="#">账户设置</a></li> <li role="separator" class="divider"></li> <li><a href="#">我的作品</a></li> </ul> </li> </ul>

用法

通过属性

添加 data-toggle="dropdown" 或切换到下拉的链接.

<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> AuxUi <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> ... </ul> </div>

使用链接按钮保持URL完整，请使用 data-target 属性代替 href="#".

<div class="dropdown"> <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> AuxUi <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="dLabel"> ... </ul> </div>

通过JavaScript

通过JavaScript调用下拉菜单:

$('.dropdown-toggle').dropdown()

方法

$().dropdown('toggle')

事件

所有的下拉事件都在 .dropdown-menu类

$(document).on('show.bs.dropdown', '#myDropdown',function (e) { alert('被调用时触发'); });