html
<div class="head-cont">
<div class="head-tit head-titA">切换数据库</div>
<div class="head-item">
<a class="_p">123</a>
<a class="_p">456</a>
<a class="_p">789</a>
<a class="_p">食品贵伐判定结束系统</a>
</div>
</div>
css
.head-tit{
background: #2469b7;
color: #fff;
border-radius: 5px;
padding: 5px 30px 5px 20px;
line-height: 28px;
position: relative;
cursor: pointer;
}
.head-titA::after{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
bottom: 40%;
right: 10px;
border: solid transparent 0.6rem;
border-bottom-color: #fff;
-webkit-transform: rotate(180deg) translateY(-50%);
transform: rotate(180deg) translateY(-50%);
}
.head-titB::before {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
bottom: 40%;
right: 10px;
border: solid transparent 0.6rem;
border-bottom-color: #fff;
}
.head-item{
background-color: #fff;
border-radius: 5px;
position: absolute;
z-index: 999;
box-shadow: 1px 1px 5px #dde4ec;
display: none;
}
.head-item ._p{
line-height: 38px;
padding: 0 12px;
border-bottom: 1px solid #ececec;
box-sizing: border-box;
margin: 0;
display: block;
}
.head-item ._p:last-child{
border-bottom: none;
}
.head-item ._p:hover{
color: #2469b7;
cursor: pointer;
}
.head-item ._p:hover::before{
content: '';
position: absolute;
height: 38px;
display: block;
border-left: 4px solid #2469b7;
left:0
}
jq
$(function(){
$('.head-tit').on('click',function(event){
$('.head-item').toggle();
event.stopPropagation();
if($(this).hasClass("head-titA")){
$(this).removeClass("head-titA").addClass("head-titB");
}else{
$(this).removeClass("head-titB").addClass("head-titA");
}
})
$(document).click(function(e){
$(".head-item").hide();
});
})