今天我實(shí)現(xiàn)了網(wǎng)頁(yè)的下拉框，有兩種操作思路：即純css路線和js路線须蜗。最終實(shí)現(xiàn)的效果是相同的：
效果圖
我的html代碼,運(yùn)用了bootstrap的一些基本樣式：
<div class="dropdown navbar-right" id="drop">
<strong class="navbar-text">dong<span class="caret"></span></strong>
<ul class="dropdown-menu dropdown-menu-right" id="space">
<li><a href="#">賬戶管理</a></li>
<li><a href="#">賬戶管理</a></li>
<li><a href="#">賬戶管理</a></li>
</ul>
</div>
純css的實(shí)現(xiàn)方法：
#space {
margin-top: 6px;
width: auto;
min-width:initial;
display: none;
}
#space::before {
content: '';
position: absolute;
top:-5px;
left: 40px;
background:inherit;
padding:5px;
border:inherit;
border-right: 0;
border-bottom:0;
transform: rotate(45deg);
}
#space::after {
content: '';
position: absolute;
padding: 5px;
background: transparent;
top:-8px;
width:100%;
}
#drop:hover #space {
display: block;
}
jQuery的實(shí)現(xiàn)方法：
jQuery的實(shí)現(xiàn)方法取消了前面的樣式表中的:hover偽類巷挥，轉(zhuǎn)而用jq代碼來(lái)實(shí)現(xiàn)相同的功能：
$("#drop").mouseover(function () {
$("#space").show();
}).mouseleave(function () {
$("#space").hide();
});
最終實(shí)現(xiàn)的效果都是相同的攒霹。
解決過(guò)程中遇到的一些問(wèn)題
我最開(kāi)始的版本中是沒(méi)有::after偽類的岖圈，然后在導(dǎo)航欄和下拉菜單之間就會(huì)存在一個(gè)6px的間隙盾计，在這個(gè)間隙中就只存在margin和一個(gè)小小的::before偽類羹幸，而光標(biāo)在margin上是不能觸發(fā)mouseover事件亦不能被視作hover狀態(tài)脊髓。因此，當(dāng)你的光標(biāo)離開(kāi)導(dǎo)航欄之后能否碰到菜單就只能看你的手速和瀏覽器的反應(yīng)速度了栅受。就這么一個(gè)小問(wèn)題今天整整弄了一個(gè)下午将硝，真是坑。屏镊。依疼。
