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

javascript：

  window.onload = function(){
    var acc;
    acc = document.getElementById('button');

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

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

Answer 2

如果您只支持Chrome和Safari或移动设备，实现此目标的一种方法是使用HTML5 详细信息元素并使用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 as属性 - 它会起作用 -

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

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

Answer 3

Jquery的

$("#button").click(function(){
  var divPnl = $('.panel');
  $(this).toggleClass("active");
  divPnl.toggleClass("show");
});

fiddle link

Answer 4

理想情况下，您可以使用已建立的方法或现有的库来制作手风琴，例如无序列表，但您已经获得的内容可以通过一些小的改动来实现：

首先，使用querySelectorAll选择.button元素。这将返回NodeList。

使用基本for-loop迭代NodeList，并为每个调用方法切换.button active类的项添加事件监听器。

我们只需使用CSS2＆＃39; Adjacent Sibling Selector来选择.button的下一个兄弟.panel

，而不是找到活动.button的子项。

<强> E.G：

＆＃13;

// Get the .buttons
var buttons = document.querySelectorAll('.button'); 
// For each button
for (i = 0; i < buttons.length; ++i) { 
  //add an event listener
  buttons[i].addEventListener("click", onButtonClick, false);
}
// On button click...
function onButtonClick(){
  this.classList.toggle("active");
}

＆＃13;

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:50px;
    width:100%;
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
    color:black;
    font-size:20px;
    margin:0 auto;
    background-color:transparent;
    border-style:none;
    outline:none;
}

.button:hover, .button.active{
    background:#eee url('http://lorempixel.com/100/20/') ;
    background-size: cover;
}
#button1:hover, #button1.active{
    background-image:url('http://lorempixel.com/100/20/');
}
#button2:hover, #button2.active{
    background-image:url('http://lorempixel.com/200/20/');
}
/* adjacent sibling selector to select a .panel next to an button.active: */
.button.active + .panel {
    opacity: 1;
    max-height: 500px;
}

＆＃13;

<button class="button" id="button1">ONE</button>
<div class="panel">
    <p>Lorem ipsum one...</p>
</div>

<button class="button" id="button2">TWO</button>
<div class="panel">
    <p>Lorem ipsum two...</p>
</div>

＆＃13;

Answer 5

您的Javascript代码中有几个错误。您试图在元素实际存在于DOM之前为其分配单击事件处理程序。您还指的是您试图错误显示的div。请参阅下面的工作JavaScript代码，其中包含注释和错误。

<a class="snapchat" style="margin: 5px 5px 0 -2px;" target="_blank" href="#">Hover for effect<img src="http://i.utdstc.com/icons/256/snapchat-android.png" /></a>

如何使Accordion（CSS + javascript）工作？

5 个答案: