Bootstrap3实用教程
4.4.1 下拉菜单的调用方式
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

Bootstrap中,你可以为任何组件(如,导航条、胶囊式导航、标签导航、按钮等)添加下拉菜单。下拉菜单组件负责外观,下拉菜单插件(dropdown.js)负责交互行为,即控制下拉菜单组件的显示或隐藏。

调用方式

1、data属性调用

为超链接或按钮添加 data-toggle="dropdown" 属性,即可激活下拉菜单的交互行为。如:

<div class="dropdown">
  <a class="btn" data-toggle="dropdown" href="#">Dropdown trigger</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>
  </ul>
</div>

为了保证URL符合规范,请使用 data-target="#" 代替 href="#",并给 href 属性指定链接来执行链接操作。如:

<div class="dropdown">
  <a class="btn" data-toggle="dropdown" data-target="#">Dropdown trigger</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>
  </ul>
</div>

2、JavaScript调用

通过 dropdown() 构造函数,可以调用下拉菜单。如:

$('.btn').dropdown()

使用上述方法后,单击按钮,可以弹出下拉菜单,但再次单击按钮,却不能收起下拉菜单。在调用 dropdown() 构造函数时,如果传入一个字符串参数 'toggle',就可以让下拉菜单在显示和隐藏间来回切换。如:

$('.btn').dropdown('toggle')

说明:

无论使用data 属性调用方式,还是JavaScript 调用方式。你都必须为触发下拉菜单显示隐藏的元素设置 data-toggle="dropdown" 属性。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验