在前文 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件 中，實(shí)現(xiàn)了DropDownList的JQuery組件，但是留有遺憾。就是當(dāng)下拉菜單出現(xiàn)滾動(dòng)條的時(shí)候，滾動(dòng)條會(huì)覆蓋菜單右側(cè)的兩個(gè)圓角。使得下拉菜單左側(cè)有2個(gè)圓角，右側(cè)沒(méi)有，看上去不是很完美。如下圖所示：
本文的內(nèi)容就是如何恢復(fù)右側(cè)的圓角
先看看原本的下拉菜單的HTML結(jié)構(gòu)：
<ul role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li></li>
<li><a href="#">Separated link</a></li>
</ul>
從上面的結(jié)構(gòu)可以看出，由ul標(biāo)簽實(shí)現(xiàn)下拉菜單的外觀（通過(guò)引用dropdown-menu樣式），由li標(biāo)簽實(shí)現(xiàn)菜單項(xiàng)（包括菜單、分隔符、組標(biāo)題）。來(lái)看看ul和li標(biāo)簽對(duì)應(yīng)的CSS：
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
由于a的樣式是通過(guò).dropdown-menu > li > a來(lái)實(shí)現(xiàn)的，故要實(shí)現(xiàn)a的外觀必須是在含有樣式dropdown-menu的ul里面的li的里面的a的。
于是，動(dòng)了一個(gè)念頭，在HTML結(jié)構(gòu)里的ul里面的li里再嵌套一個(gè)包含樣式dropdown-menu的ul，ul里面是li，li里面是a。
但是從上面的CSS可以看出，嵌套在里面的ul也會(huì)實(shí)現(xiàn)菜單的外觀（圓角、投影、浮動(dòng)等），故在該ul的標(biāo)簽里強(qiáng)制添加style屬性，把一些樣式強(qiáng)制性的去除（改成inherit，采用默認(rèn)樣式），這些樣式包括display、position、top、float、padding、border、border-radius、-webkit-box-shadow、box-shadow。
再說(shuō)說(shuō)MaxHeight。本次修改后直接采用CSS的樣式max-height，而減少對(duì)菜單高度的判斷。會(huì)有疑問(wèn)，如果瀏覽器不支持max-height怎么辦？一是不支持max-height的瀏覽器比較少（IE6等），二是如果瀏覽器不支持max-height，也就不能很好的支持Bootstrap。故不必考慮瀏覽器是否支持max-height屬性。由于里外有2個(gè)ul標(biāo)簽，我們需要對(duì)里面的ul標(biāo)簽應(yīng)用max-height屬性，故用UL=Obj.find("ul[style]")語(yǔ)句來(lái)找尋里面的ul標(biāo)簽（因?yàn)槔锩娴膗l含有style屬性，而外面的ul沒(méi)有）。
再說(shuō)說(shuō)JQuery的height方法。當(dāng)調(diào)用JQuery的height方法來(lái)計(jì)算隱藏元素高度時(shí)，估計(jì)是先會(huì)顯示元素，然后計(jì)算高度，再隱藏元素。這會(huì)有兩個(gè)問(wèn)題。一是顯示再隱藏，速度很快，肉眼看不出，但是瀏覽器不會(huì)說(shuō)謊，有時(shí)瀏覽器會(huì)額外顯示滾動(dòng)條。二是如果該元素的父元素也是隱藏的，則height方法會(huì)返回0。
完善版的源代碼：
(function($){
jQuery.fn.DropDownList = function(options) {
var defaults ={
InputName:"Q",
ButtonText:"示例",
ReadOnly:true,
MaxHeight:-1,
onSelect:$.noop(),
}
var options = $.extend(defaults,options);
return this.each(function(){
var o=options;
var Obj=$(this);
var S="<div class='input-group'>";
S = S + "<input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "' />";
S = S + "<div class='input-group-btn'>";
S = S + "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" + o.ButtonText + " <span class='caret'></span></button>";
S = S + "<ul class='dropdown-menu dropdown-menu-right' role='menu' >";
S = S + "<li><ul class='dropdown-menu ' style='display:inherit;position:inherit;top:0;float:inherit;padding:0;border:0px;border-radius:0px;-webkit-box-shadow: inherit;box-shadow: inherit;'>";
var SelText,SelData;
if (o.Sections!== undefined)
{
$.each(o.Sections,function(n,value){
if (n>0) {S=S + "<li class='divider'></li>";}
if (value.ItemHeader!==undefined) {S = S + "<li class='dropdown-header'>" + value.ItemHeader + "</li>";}
CreateItem(value);
});
}
else
{
CreateItem(o);
}
function CreateItem(Items)
{
$.each(Items.Items,function(n,Item){
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
S=S + "<li><a href='#' ItemData='" + Item.ItemData + "' >" + Item.ItemText + "</a></li>";
if (Item.Selected==true) {SelText=Item.ItemText;SelData=Item.ItemData;}
});
}
S =S + "</ul></li></ul></div></div>";
Obj.html(S);
var Input=Obj.find("input");
if (SelText!="") {SetData(SelText,SelData);}
Obj.find("a").bind("click", function(e) {
SetData($(this).html(),$(this).attr("ItemData"));
});
if (o.ReadOnly==true)
{
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});
}
if (o.MaxHeight>0)
{
var UL=Obj.find("ul[style]");
UL.css({'max-height':o.MaxHeight,'overflow':'auto'});
}
function SetData(Text,Data)
{
Input.val(Text);
if (o.onSelect) {o.onSelect(o.InputName,Data);}
}
});
}
})(jQuery);
樣張：
這樣通過(guò)兩層的ul實(shí)現(xiàn)了下拉菜單，并且滾動(dòng)條也沒(méi)有覆蓋右側(cè)的兩個(gè)圓角。較之上個(gè)版本，比較完善。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助