Bootstrap学习js插件篇之下拉菜单_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:56:471062검색
案例
通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。
用于导航条
导航条分为四个部分。第一部分导航头，第二部分导航列，第三部分form查询表单，第四部分导航列。
[javascript] view plaincopy
- lt;/nav>
效果就是
用法一--通过data属性
通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>
用法二--通过JavaScript
通过JavaScript打开或关闭下拉菜单：
删除data-toggle属性，那么再次点击就不会出现下来菜单了，接下来我们通过给这个a标签添加一个onclick事件。
<script type="text/javascript"> function Test() { $('#myDropDown').dropdown(); } </script>
然后点击a标签就可以出现下拉菜单了。
可以绑定事件，然后在元素进行相应处理的时候会自动绑定到元素，并进行执行相关的代码。
$('#myDropdown').on('show.bs.dropdown', function () { // 在显示的时候做一些处理代码})
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.