版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rhx_1989/article/details/89027036
1.css
.ren-btn-group {
position: relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
font-size:0;
}
.ren-btn-group > .btn:first-child {
margin-left: 0;
-webkit-border-radius: 2px 0 0 2px;
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
}
.ren-btn-group .btn {
position: relative;
font-size: 12px;
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #e6e6e6;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, white, #e6e6e6);
background-image: -moz-linear-gradient(top, white, #e6e6e6);
background-image: -ms-linear-gradient(top, white, #e6e6e6);
background-image: -o-linear-gradient(top, white, #e6e6e6);
background-image: linear-gradient(top, white, #e6e6e6);
background-repeat: repeat-x;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ren-btn-group > .btn + .btn {
margin-left: -1px;
}
.ren-btn-group > .dropdown-toggle {
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
}
.ren-btn-group .btn-primary {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #2877aa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3693cf), to(#2877aa));
background-image: -webkit-linear-gradient(top, #3693cf, #2877aa);
background-image: -moz-linear-gradient(top, #3693cf, #2877aa);
background-image: -ms-linear-gradient(top, #3693cf, #2877aa);
background-image: -o-linear-gradient(top, #3693cf, #2877aa);
background-image: linear-gradient(top, #3693cf, #2877aa);
background-repeat: repeat-x;
border-color: #3693cf #3693cf #2877aa;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.ren-btn-group .caret {
margin-top: 8px;
margin-left: 0;
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
.ren-btn-group .dropdown-menu {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
min-width: 100px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}
.ren-btn-group .pull-right {
right: 0;
float: right!important;
}
.ren-btn-group .dropdown-menu li > a {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
display: block;
border-bottom: 1px solid #e6e6e6;
padding: 5px 10px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
.ren-btn-group .dropdown-menu li > a:hover{background-color:#eaeaea;}
.ren-btn-group > .dropdown-menu, .btn-group > .popover {
font-size: 14px;
}
.ren-btn-group .dropdown-menu a {
color: #337ab7;
text-decoration: none;
}
.open > .dropdown-menu {
display: block;
}
2.js
!function ($) {
"use strict"; // jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) {
$parent.toggleClass('open')
}
$this.focus()
return false
}
, keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
if ($this.is('.disabled, :disabled')) return
$parent = getParent($this)
isActive = $parent.hasClass('open')
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
$items = $('[role=menu] li:not(.divider):visible a', $parent)
if (!$items.length) return
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0
$items
.eq(index)
.focus()
}
}
function clearMenus() {
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
}
function getParent($this) {
var selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
var old = $.fn.dropdown
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* DROPDOWN NO CONFLICT
* ==================== */
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
3.html
<div class="ren-btn-group">
<button class="btn btn-primary">
查看详情
</button>
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">修改</a>
</li>
<li>
<a href="#">删除</a>
</li>
</ul>
</div>
<div class="ren-btn-group">
<button class="btn btn-primary">
查看详情
</button>
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">修改</a>
</li>
<li>
<a href="#">删除</a>
</li>
</ul>
</div>
<div class="ren-btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
默认 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
</ul>
</div>