码迷,mamicode.com
首页 > Web开发 > 详细

CSS&JS两种方式实现手风琴式折叠菜单

时间:2017-05-01 18:18:59      阅读:440      评论:0      收藏:0      [点我收藏+]

标签:accordion   部分   span   src   targe   技术   ref   img   分享   

技术分享
<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

 

CSS&JS两种方式实现手风琴式折叠菜单

标签:accordion   部分   span   src   targe   技术   ref   img   分享   

原文地址:http://www.cnblogs.com/carriej/p/6792316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!