首页 > 代码库 > CSS&JS两种方式实现手风琴式折叠菜单
CSS&JS两种方式实现手风琴式折叠菜单
<div class="accordion"> <div id="one" class="section"> <h3><a href="#one">折叠栏1</a></h3> <div id="image1" class="image"><img src=""></div> </div> <div id="two" class="section"> <h3><a href="#two">折叠栏2</a></h3> <div id="image2" class="image"><img src=""></div> </div> <div id="three" class="section"> <h3><a href="#three">折叠栏3</a></h3> <div id="image3" class="image"><img src=""></div> </div> <div id="four" class="section"> <h3><a href="#four">折叠栏4</a></h3> <div id="image4" class="image"><img src=""></div> </div> <div id="five" class="section"> <h3><a href="#five">折叠栏5</a></h3> <div id="image5" class="image"><img src=""></div> </div> <div id="six" class="section"> <h3><a href="#six">折叠栏6</a></h3> <div id="image6" class="image"><img src=""></div> </div></div>
CSS3 利用 :target 伪类实现
.accordion h3+div{ height: 0; overflow: hidden;/*超出部分隐藏*/ transition: height 0.3s ease-in;/*展开的一种特效,以0.3s慢慢飞入*/}.accordion :target h3+div{ height: 300px; overflow: auto;/*超过部分自动隐藏*/}
JS实现
function showSection(id) { var images=document.getElementsByClassName("image"); for(var i=0;i<images.length;i++){ if(images[i].getAttribute("id")!=id){ images[i].style.display="none"; }else{ images[i].style.display="block"; } }}function imagesHidden() { var images=document.getElementsByClassName("image"); for(var i=0;i<images.length;i++){ var id=images[i].getAttribute("id"); document.getElementById(id).style.display="none"; }}function addClick() { var sections=document.getElementsByClassName("section"); for(var i=0;i<sections.length;i++){ sections[i].onclick=function () { var showID=this.children[1].getAttribute("id"); showSection(showID); } }}
CSS&JS两种方式实现手风琴式折叠菜单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。