<!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>Document</title>
<style>
ul li{
width: 200px;text-align: center;
border: 1px solid black;background-color: rgb(171, 189, 247);
}
/* 不定高度 */
span {display: block; line-height: 25px;}
ul{list-style: none;}
.box div {
width: 200px;height: 100px;border-bottom: 1px solid black;
display: none;background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><span>title 1</span>
<div>我是弹出来的div1</div></li>
<li><span>title 2</span>
<div>我是弹出来的div2</div></li>
<li><span>title 3</span>
<div>我是弹出来的div3</div></li>
<li><span>title 4</span>
<div>我是弹出来的div4</div></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){
$("span").click(function(){
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
});
// span的下一个元素（div）设置slideDown
// span的父亲（当前li）的相邻兄弟（其他li）的儿子div设置slideUp
});
</script>
</body>
</html>
手风琴jq实现
猜你喜欢
转载自www.cnblogs.com/sandraryan/p/11072397.html
今日推荐
周排行