シミュレーションselectドロップダウン選択ボックス
13862 ワード
ul,
li {
list-style: none
}
.select_contain {
font-size: 14px;
color: #333;
line-height: 38px;
}
.select_item {
position: relative;
}
.select_tit {
margin-right: 20px;
}
.select_result {
width: 70px;
line-height: 38px;
border: 1px solid #ccc;
text-align: center;
border-radius: 4px;
text-indent: -8px;
}
.select_result .triangle {
border: 5px solid transparent;
border-top: 5px solid #666;
position: absolute;
top: 16px;
right: 8px;
}
.select_item ul {
display: none;
position: absolute;
width: 70px;
background: #fff;
border: 1px solid #ccc;
border-radius: 0 0 4px 4px;
border-top-color: #f3f3f3;
margin-top: -4px;
padding: 0px;
}
.select_item ul li {
text-align: center;
}
.select_item ul li:hover {
background: #eee;
color: #fff;
}
<div class="select_contain">
<div class="select_item clearfix">
<div class="select_module_con">
<div class="select_result">
<span> </span>
<div class="triangle"></div>
</div>
<ul>
<li> </li>
<li> </li>
</ul>
</div>
</div>
</div>
$(function () {
$(document).click(function () {
$(".select_module_con ul").slideUp();
})
var module = $(".select_result");
module.click(function (e) {
e.stopPropagation();
var ul = $(this).next();
ul.stop().slideToggle();
ul.children().click(function (e) {
e.stopPropagation();
$(this).parent().prev().children("span").text($(this).text());
ul.stop().slideUp();
console.log($(this).text(), "---- ")
})
})
})