javaScript小案例------js实现手风琴效果篇

原生js书写手风琴效果

js手风琴效果

我用了两种方法来完成手风琴效果，第一种是原生js实现，第二种方法只是模仿手风琴效果，看一下就好，主要还是第一种方法

手风琴效果展示

第一种方法

手风琴需求

手风琴效果就是相当于菜单下拉，鼠标点击哪一个菜单，哪一个菜单的下拉菜单就显示出来。具体的需求就是这样，具体的js见

html和css:

html与css话不多说，直接上代码

html：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>手风琴效果</title><linkrel="stylesheet"href="./index.css"></head><body><ulclass="container"><liclass="menu-container"><p>菜单一</p><ulclass="menu-ul"><li>菜单一.1</li><li>菜单二.2</li><li>菜单三.3</li><li>菜单四.4</li></ul></li><liclass="menu-container"><p>菜单二</p><ulclass="menu-ul"><li>菜单二.1</li><li>菜单二.2</li><li>菜单二.3</li><li>菜单二.4</li></ul></li><liclass="menu-container"><p>菜单三</p><ulclass="menu-ul"><li>菜单三.1</li><li>菜单三.2</li><li>菜单三.3</li><li>菜单三.4</li></ul></li><liclass="menu-container"><p>菜单四</p><ulclass="menu-ul"><li>菜单四.1</li><li>菜单四.2</li><li>菜单四.3</li><li>菜单四.4</li></ul></li></ul><scriptsrc="./index.js"></script><scriptsrc="./animate.js"></script></body></html>

css:

*{margin: 0;padding: 0;box-sizing: border-box;}.container{width: 200px;margin: 0 auto;margin-top: 40px;}.menu-container{background-color: cadetblue;margin-top: 30px;}li{list-style: none;}p{/* padding-left: 40px; */margin-left: 40px;font-size: 15px;font-weight: bold;cursor: pointer;height: 40px;line-height: 40px;}.menu-ul{padding-left: 20px;line-height: 40px;height: 0px;overflow: hidden;background-color: violet;}

js

animate.js

这个代码我就不多讲了，因为我在js小案例-无缝轮播图中讲过了，不懂得可以去看无缝轮播图。这里不多讲解，直接上代码：

// 动画functioncreateAnimation(options){var form = options.form;var to = options.to;var totalTime = options.totalTime ||1000;var duration = options.duration ||15;var times = Math.floor(totalTime / duration);var durationHeight =(to - form)/ times;var curTime =0;var timeId =setInterval(function(){
        form += durationHeight;
        curTime++;if(curTime >= times){
            form = to;clearInterval(timeId);
            options.onend && options.onend();}
        options.onmove && options.onmove(form);}, duration);}

index.js

这是核心，主要讲一下我写的思路以及解决办法。
首先是写打开一个子菜单，直接书写一个函数，调用createAnimation函数，起始值是0，结束值是子菜单的个数乘以一个子菜单的高度，然后再onmove中定义height，然后再定义一个子菜单的状态，以便关闭打开，通过自定义属性来判断它的状态，如果是关闭的，就return啥都不干，否则就是play，然后再onend中写入open，表示子菜单已经打开。
然后开始关闭子菜单方法与打开子菜单一样，只不过起始值变成了打开子菜单的结束值，结束值是打开子菜单的起始值。然后自定义属性样式从open变为close。
最后是切换子菜单和收起其他的子菜单，所以只要判断一下子菜单的状态就行了，正在播放动画运行的就return，啥都不干，等于open的就关闭，反之就打开子菜单。然后就是点击事件的补充，以及收起其他的子菜单。完毕

// 封装document.querySelector()function$(selector){return document.querySelector(selector);}// 交互// 获取到所有的菜单项var title = document.querySelectorAll('.menu-container p');// console.log(title);// 遍历所有的菜单项，分别注册鼠标点击事件for(var i =0; i < title.length; i++){
    title[i].onclick=function(){var click = document.querySelector('.menu-ul[status=opened]');if(click){close(click);}switchMenu(this.nextElementSibling);};}// 点击菜单，菜单显示出来var menu =$('.menu-ul');var menuHeight =40;var totalTime =20;functionopen(menu){var status = menu.getAttribute('status');if(status !=='closed'&& status){return;}
    menu.setAttribute('status','playing');createAnimation({form:0,to: menuHeight * menu.children.length,totalTime:500,onmove:function(n){
            menu.style.height = n +'px';},onend:function(){
            menu.setAttribute('status','opened');},});}functionclose(menu){var status = menu.getAttribute('status');if(status !=='opened'){return;}
    menu.setAttribute('status','playing');createAnimation({form: menuHeight * menu.children.length,to:0,totalTime:500,onmove:function(n){
            menu.style.height = n +'px';},onend:function(){
            menu.setAttribute('status','closed');},});}functionswitchMenu(menu){var status = menu.getAttribute('status');if(status ==='palying'){return;}elseif(status ==='opened'){close(menu);}else{open(menu);}}

第二种方法

这一种方法是鼠标移动上去就显示子菜单了。所以我不做讲解，直接上代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title><style>*{margin: 0;padding: 0;font-size: 100%;list-style: none;}.menu{width: 200px;height: 50px;background: #409eff;color: #fff;line-height: 50px;margin: 0 auto;margin-top: 50px;text-align: center;cursor: pointer;position: relative;}.sub-menu{background: #ddebfd;font-size: 14px;line-height: 35px;color: #333;padding: 10px 0;position: absolute;width: 100%;}</style><style>.sub-menu{transform-origin: center top;transform:scaleY(0);transition: 0.5s;}.menu:hover .sub-menu{transform:scaleY(1);}</style></head><body><divclass="menu"><h2>下拉菜单</h2><ulclass="sub-menu"><li>子菜单1</li><li>子菜单2</li><li>子菜单3</li><li>子菜单4</li></ul></div></body></html>

标签： javascript

本文转载自: https://blog.csdn.net/qq_56745273/article/details/123977572
版权归原作者 前端小贺 所有，如有侵权，请联系我们删除。

javaScript小案例------js实现手风琴效果篇

原生js书写手风琴效果

js手风琴效果

第一种方法

手风琴需求

html和css:

html：

css:

js

animate.js

index.js

第二种方法

发表评论

“javaScript小案例------js实现手风琴效果篇”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航