javascript - Accordion 不显示下拉内容

Question

我有一个名为 .multi-col-icon-list 的 div。这个 div 有两个 child :

• .text_col-1:里面有图标
• image_col-2:这是一个动态 div。它将根据点击的图标显示信息。

在桌面上，图标显示在 3x3 网格中。但是，对于移动设备，我正在尝试将其转换为 Accordion 。

描绘我希望它如何运作的图片:

我的桌面工作正常，但文本似乎没有出现在移动设备下，我相信这是因为 WordPress。

在下面的代码中，您将看到演示代码完成了它的工作。但是，在我的页面上，当我单击一个按钮时，它会在 p 标记上显示 display: block; 而不是将 .accordionPanel 更改为显示: 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>

我的问题:

1. 有解决办法吗？制作 .accordionPanel display: block 而不是其他任何东西？
2. 如何让按钮在第一次出现时始终关闭？

Answer 1

试试这个作为基础:

$( document ).ready(function() {
    $(".accordionPanel").css('display', 'none'); //hide all the accordions as the script loads
    $(".accordion").each( function() {
        $(this).on("click", function() {
            $(".accordion").removeClass("active");
            $(".accordionPanel").css('display', 'none');
            $(this).addClass("active");
            $(this).next(".accordionPanel").css('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/3-circle.png">
            <h4>Section 3</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 3</p>
         </div>
         <!-------------->
      </div>
  </div>
</div>