CSS&JS兩種方式實現手風琴式摺疊菜單，css教程

CSS&JS兩種方式實現手風琴式摺疊菜單，css教程
<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>View Code

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;/*超過部分自動隱藏*/}View Code 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); } }}View Code