【发布时间】：2019-05-15 17:05:55
【问题描述】：
我有一个名为 .multi-col-icon-list 的 div。这个 div 有两个孩子：
-
.text_col-1: 里面有图标 -
image_col-2：这是一个动态 div。它将根据单击的图标显示信息。
在桌面上，图标显示在 3x3 网格中。但是，对于移动设备，我正在尝试将其转换为手风琴。
描述我希望它如何工作的图片：
我的桌面工作正常，但文字似乎没有出现在移动设备下方，我相信这是因为 WordPress。
在下面的代码中，您将看到演示代码完成了它的工作。但是，在我的页面上，当我单击一个按钮时，它会在 p 标记上显示 display: block;，而不是将 .accordionPanel 更改为 display: block;。
猜测p 标签是从 WordPress 自动生成的，我不想进入并禁用它们，因为我不确定其他页面是如何编码的。
话虽如此，JS 明确声明将. accordionPanel 更改为block，所以不确定为什么要更改p？
代码：
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var accordionPanel = this.nextElementSibling;
if (accordionPanel.style.display === "block") {
accordionPanel.style.display = "none";
} else {
accordionPanel.style.display = "block";
}
});
}img {
height: 50px;
}
.text_col-1{
display: flex;
flex-direction:column;
}
.accordionPanel{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 3px solid #6BBDB9;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="two_col-container">
<div class="text_col-1">
<!-- ACCORDION -->
<div class="accordion-wrapper">
<!-- ELEMENT 1 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/1-circle.png">
<h4>Section 1</h4>
</button>
<div class="accordionPanel">
<p>text for icon 1</p>
</div>
<!-- ELEMENT 2 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/2-circle.png">
<h4>Section 2</h4>
</button>
<div class="accordionPanel">
<p>text for icon 2</p>
</div>
<!-- ELEMENT 3 -->
<button class="accordion">
<img src="https://img.icons8.com/metro/1600/2-circle.png">
<h4>Section 3</h4>
</button>
<div class="accordionPanel">
<p>text for icon 3</p>
</div>
<!-------------->
</div>
</div>
</div>我的问题：
- 有解决方法吗？制作
.accordionPaneldisplay: block而不是其他任何东西？ - 如何让按钮在第一次使用时始终关闭？
【问题讨论】：
-
您添加了 jquery，但您使用的是纯 javascript，jquery 解决方案对您有好处吗？
-
嗨@DaFois - 是的，JQuery 也很好
-
antway，我认为您的问题与您尝试
document.getElementsByClassName时未准备好的DOM有关...
标签： javascript jquery html css accordion