Question

我有这段代码：

使用Javascript：

var acc = document.getElementsByClassName("button");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

CSS：

.button{
    display:block;
    height:431px;
    width:100%;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    color:black;
    font-size:80px;
    margin:0 auto;
    background-color:transparent;
    border-style:none;
}

.button:hover{
    background: url('pcluj.jpg') ;
    background-size: cover;
}


.button1{
    display:block;
    height:431px;
    width:100%;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    color:black;
    font-size:80px;
    margin:0 auto;
    background-color:transparent;
    border-style:none;
}

.button1:hover, .button1.active{
    background: url('bucuresti.jpg') ;
    background-size: cover;
}

.button2{
    display:block;
    height:431px;
    width:100%;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    color:black;
    font-size:80px;
    margin:0 auto;
    background-color:transparent;
    border-style:none;

}

.button2.active, .button2:hover{
    background: url('sibiu.jpg') ;
    background-size: cover;
    transition: 0.6s ease-in-out;


}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

HTML：

<center>
    <button class="button" id="button">CLUJ</button>
</center>

<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<center>
    <button class="button1" id="button1" >BUCURESTI</button>
</center>

<div class="panel" id='panel'>
    <p>Lorem ipsum...</p>
</div>

<center>
    <button class="button2" id="button2">SIBIU</button>
</center>

<div class="panel">
    <p>Lorem ipsum...</p>
</div>

如何让所有按钮像手风琴一样？我有不同的类名，因为当我将鼠标悬停时，每个按钮都有不同的背景图像。

此版本的代码不适用于所有按钮，仅适用于第一个按钮。该怎么办？

Answer 1

变量acc是一个带有类名＆＃34;按钮＆＃34;的按钮数组。但是你的类名只是html代码中一个按钮元素的按钮，所以它适用于按钮CLUZ。正如您为每个按钮定义了一个id，尝试在css中使用id选择器（#button，＃button1，＃button2）而不是类选择器（.button，.button1，.button2），它可以帮助您拥有不同的背景图像。并为所有按钮设置相同的类名，并在下面的行中使用

 var acc = document.getElementsByClassName("buttonName");

将CSS-Accordion应用于不同的按钮

1 个答案: