javascript - 如何使 Accordion(CSS+javascript) 工作？

Question

到目前为止我有这段代码:

var acc;
    acc = document.getElementByClassName('button');

    acc.onclick = function()
    {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }

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

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

.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, .button.active{
    background: url('pcluj.jpg') ;
    background-size: cover;
}

<center><button class="button" id="button">CLUJ</button></center>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

现在它不起作用，我不知道为什么!!当我按下第一个按钮时，div 没有出现。解决办法是什么？请帮忙!

看起来我的帖子只是代码，所以我必须写这个才能发布......

Answer 1

如果您只支持 Chrome 和 Safari 或移动设备，实现它的一种方法是使用 HTML5 details 元素并使用 CSS 设置样式。您甚至不需要 JavaScript。

继续阅读:http://dipaksblogonline.blogspot.in/2014/09/html5-details-element.html

基本演示:http://jsfiddle.net/8mthoj5g/1/

<details open>
    <summary>Click me to toggle more information</summary>
    <div>The details element is used as a widget to show/hide additional information.</div>    
</details>

另一种方法 是在按钮上使用 onclick 作为属性 - 它会起作用 -

<button class="button" id="button1" onclick="someFunc()">CLUJ</button>

演示:https://jsfiddle.net/Lp05m27p/