Bootstrap 下拉菜单（Dropdown）插件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 带有下拉菜单的标签页</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">iOS</a></li><li><a href="#">VB.Net</a></li><li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li><li><a href="#">PHP</a></li>
</ul></body>
</html>

active的样式,border的设置,选中和hover的样式

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {color: #555;cursor: default;background-color: #fff;border: 1px solid #ddd;border-bottom-color: transparent;
}

下拉菜单,li的li,li的内容为一个button,

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li>

dropdown 里的open和aria-expanded=""的值相关

表示显示下拉菜单和隐藏

<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li>

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">Java <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Swing</a></li><li><a href="#">jMeter</a></li><li><a href="#">EJB</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li></ul></li>

bootstrap里js的是实现

根据class设置div的class,用class来控制显示效果

Dropdown.prototype.toggle = function (e) {var $this = $(this)if ($this.is('.disabled, :disabled')) returnvar $parent  = getParent($this)var isActive = $parent.hasClass('open')clearMenus()if (!isActive) {if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {// if mobile we use a backdrop because click events don't delegate$(document.createElement('div')).addClass('dropdown-backdrop').insertAfter($(this)).on('click', clearMenus)}var relatedTarget = { relatedTarget: this }$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))if (e.isDefaultPrevented()) return$this.trigger('focus').attr('aria-expanded', 'true')$parent.toggleClass('open').trigger($.Event('shown.bs.dropdown', relatedTarget))}return false}

  var backdrop = '.dropdown-backdrop'var toggle   = '[data-toggle="dropdown"]'function getParent($this) {var selector = $this.attr('data-target')if (!selector) {selector = $this.attr('href')selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7}var $parent = selector && $(selector)return $parent && $parent.length ? $parent : $this.parent()}function clearMenus(e) {if (e && e.which === 3) return$(backdrop).remove()$(toggle).each(function () {var $this         = $(this)var $parent       = getParent($this)var relatedTarget = { relatedTarget: this }if (!$parent.hasClass('open')) returnif (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))if (e.isDefaultPrevented()) return$this.attr('aria-expanded', 'false')$parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))})}

Bootstrap 下拉菜单（Dropdown）插件相关推荐

android的dropdownmenu,Bootstrap 下拉菜单.dropdown的具体使用方法
本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown ...
Bootstrap下拉菜单dropdown组件的使用
Bootstrap下拉菜单组件的使用由于官方文档介绍不全,以及官方下载的包不完整,所以总测试不出效果!这里找条捷径给大家. 我们知道Bootstrap下拉菜单并非是真正意义上的select下拉框组件 ...
bootstrap下拉菜单dropdown点击后阻止自动收起菜单
公司有个切换院区的下拉框,使用的bootstrap的dropdown,以前是单选,因此点击切换后就会自动收起并且将数据传给后台,现在改成了多选,出现了一个问题就是点击一个后也会自动收起,这样的多选肯定 ...
下拉菜单html菜鸟教程,Bootstrap 下拉菜单
Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您 ...
linux boot菜单列表,Bootstrap 下拉菜单（Dropdowns）简介
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class ...
Bootstrap下拉菜单
前面的话网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
Bootstrap 下拉菜单
下拉菜单 Bootstrap中,可以将下拉菜单添加到任何其他组件中,包括导航条.胶囊式导航.标签导航.按钮导航等. 下拉菜单插件需要 bootstrap-dropdown.js 文件支持,在使用该插件 ...
Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...

Bootstrap 下拉菜单（Dropdown）插件

Bootstrap 下拉菜单（Dropdown）插件相关推荐

最新文章

热门文章