点击下拉菜单并选择选项,会把新的选项赋值给原元素。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>共享服务列表</title>
<style>
.option_box{
display:none; //先把下拉菜单隐藏,点击时再显示
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="f-df">
<div class="u_select f-dfa">
<div class="select_box">
<span class="ctt" id="idoGradeType">组别</span>
<img class="arrow" alt="">
</div>
<ul class="option_box">
<li class="option">进行中</li>
<li class="option">加分项</li>
<li class="option">减分项</li>
</ul>
</div>
<script>
$(".u_select").click(function () {
event.stopPropagation();
$(this).children(".option_box").fadeToggle(200);
});
$(".u_select").on("click", ".option", function () {
$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
})
$(document).click(function () {
$(".option_box").fadeOut();
});
</script>
</body>
</html>
$(".u_select").click(function () {
event.stopPropagation();
$(this).children(".option_box").fadeToggle(200);
});
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换,即在淡入、淡出之间切换。
即点击 <div class="select_box"> 时,它的子元素中的 <ul class="option_box"> 在淡入和淡出之间切换,
event.stopPropagation(); 阻止事件的冒泡方法,不让事件向documen上蔓延,如果不加这个,下拉菜单会不停的淡入淡出。
$(".u_select").on("click", ".option", function () {
$(this).parent().siblings(".select_box").find(".ctt").text($(this).text())
})
$(".u_select").on("click", ".option", function (){},意思是在点击 ".u_select" 时,对 ".option" 进行操作,
所以方法中的 $(this) 指的就是 ".u_select",
siblings()列出所有兄弟元素(不含自身),siblings(".select_box") 即兄弟元素中的 ".select_box",
text( $(this).text() ) 即将当前元素(".option")的 text 赋值给所选元素(".ctt")的 text。
$(document).click(function () {
$(".option_box").fadeOut();
});
点击页面任何位置,".option_box"都会淡出。