手风琴效果
1、题目
在jQuery库里面拿到一个案例,要求实现手风琴效果,鼠标点击当前模块可以展开,再次点击可以收缩,然后点击当前模块其他模块收缩…模拟手风琴效果
2、写法与思路(布局)
(1)、首先先分析页面布局,该效果是由若干个ul和li组成的,那么我们就要在页面创建若干个ul和li元素,并且简单的写一下这些元素的样式,并且将所有的ul设置溢出隐藏,将li先隐藏一下;
(2)、其次,还要考虑到点击某个ul时候当前ul底下的li的样式变为display:block;并且再次点击当前ul时候能够收缩;
(3)、然后,点击某个ul时候,其他打开的ul底下的li变为display:none;
(4)、最后,为实现(2)、(3)需要采用到排他思想(消灭所有人,保留我自己);
(5)、结合所有的功能保证不出bug要分析每一步for循环是否冲突;
3、实现功能展示
4、参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
width: 300px;
/* border: 1px solid red; */
margin:auto;
text-align: center;
line-height: 50px;
background-color: antiquewhite;
overflow: hidden;
}
li{
width: 100%;
height: 0px;
background-color: palevioletred;
text-align: center;
line-height: 50px;
transition: height 1s linear;
}
</style>
</head>
<body>
<ul>
语言
<li>中文</li>
<li>英语</li>
<li>韩语</li>
</ul>
<ul>
运动
<li>足球</li>
<li>羽毛球</li>
<li>乒乓球</li>
</ul>
<ul>
乐器
<li>吉他</li>
<li>钢琴</li>
<li>古筝</li>
</ul>
<ul>
配饰
<li>手镯</li>
<li>墨镜</li>
<li>怀表</li>
</ul>
<ul>
男装
<li>美特斯邦威</li>
<li>唐狮</li>
<li>森马</li>
</ul>
<script>
//获取元素ul和li的集合
var ul=document.getElementsByTagName("ul")
var li=document.getElementsByTagName("li")
// console.log(ul,li);
for(var i=0;i<ul.length;i++){
// 设置立即执行函数为防止for中i不能与点击事件一一对应
(function(myi){
ul[myi].onclick=function(){
//单独拎出来所有ul时,当前点击ul不受影响其他ul底下的li样式关闭
for(var k=0;k<ul.length;k++){
//跳出本次点击的ul的循环
if(myi==k){
continue;
}
for(var j=0;j<ul[k].querySelectorAll("li").length;j++){
ul[k].querySelectorAll("li")[j].style.height="0px"
}
}
// 获取最终li的样式并赋值给到变量sty先存起来
var sty=window.getComputedStyle(this.querySelectorAll("li")[0]).height
// 判断当前ul底下的li的样式
if(sty=="0px"){
for(var j=0;j<this.querySelectorAll("li").length;j++){
this.querySelectorAll("li")[j].style.height="50px"
}
}else{
for(var j=0;j<this.querySelectorAll("li").length;j++){
this.querySelectorAll("li")[j].style.height="0px"
}
}
}
})(i)
}
</script>
</body>
</html>
5、总结
最重要的是布局,小小手风琴在布局上难倒了很多人,导致在js中写对dom元素的操作出现很多问题,为了避免这些错误,要分析怎么一种布局能够更加简单实现手风琴效果,用js底层写手风琴确实有很多种方法,大家有简单的方法可以一起探讨探讨!