Question

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

2016-04-27

313

javascript html css

我到目前为止拥有此代码：

734705920

现在它不起作用，我不知道为什么！当我按第一个按钮时，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/

Answer 2

Jquery

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

小提琴链接

Answer 3

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>