JS底层书写简单手风琴效果！

最新推荐文章于 2023-08-29 22:08:46 发布

小猫爱摸鱼

最新推荐文章于 2023-08-29 22:08:46 发布

阅读量398

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/Wsh20210301/article/details/116430238

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

手风琴效果

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底层写手风琴确实有很多种方法，大家有简单的方法可以一起探讨探讨！

小猫爱摸鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS底层书写简单手风琴效果！

手风琴效果1、题目在jQuery库里面拿到一个案例，要求实现手风琴效果，鼠标点击当前模块可以展开，再次点击可以收缩，然后点击当前模块其他模块收缩…模拟手风琴效果2、写法与思路（布局）（1）、首先先分析页面布局，该效果是由若干个ul和li组成的，那么我们就要在页面创建若干个ul和li元素，并且简单的写一下这些元素的样式，并且将所有的ul设置溢出隐藏，将li先隐藏一下；（2）、其次，还要考虑到点击某个ul时候当前ul底下的li的样式变为display：block;并且再次点击当前ul时候能够收缩
复制链接

扫一扫