手风琴效果如图:
完成HTML和CSS样式的布局:
<body>
<ul>
<li>
<span>标题1</span>
<div>我是弹出来的div1</div>
</li>
<li>
<span>标题2</span>
<div>我是弹出来的div2</div>
</li>
<li>
<span>标题3</span>
<div>我是弹出来的div3</div>
</li>
<li>
<span>标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
</body>
<style>
* {
padding: 0;
margin: 0;
}
ul{
width: 200px;
text-align: center;
list-style: none;
}
li{
border: 1px solid #999;
background-color: #e0ecff;
}
span{
display: block;
height: 20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
div{
height: 200px;
background-color: #fff;
display: none;
}
</style>
原生js方式:
点击它的父级元素让它父级元素的第一个子级元素显示,其他的隐藏
nextElementSibling 获取父级中的第一个子元素
<script>
var spanobj =document.getElementsByTagName("span");
for(var i=0;i<spanobj.length;i++){
spanobj[i].onclick = function(){
for(var j=0;j<spanobj.length;j++){
spanobj[j].nextElementSibling.style.display = "none"
this.nextElementSibling.style.display = "block"
}
}
}
</script>
jQuery方式:
首先先获取到点击元素的this,将点击的this对象的兄弟级下拉,其他的兄弟级收回
next() — 获取当前元素的下一个兄弟元素
<script>
$("span").click(function(){
$(this).next().slideDown(1000);
$(this).parent().siblings().children("div").slideUp(1000);
})
</script>