试图在我的tumblr页面上设置手风琴部分

Question

在过去的9个小时里，我一直试图在我的tumblr页面上设置这个页面，但是我没有任何尝试。我在谷歌上搜索过，尝试过20种不同的方法，结果我被困住了。

我设置了一个JSfiddle，这样就可以更容易地看到我想要的东西(以及失败的原因)。有人能告诉我我做错了什么吗？

https://jsfiddle.net/q50as7u0/4/

<div class="accordion-section"><a class="accordion-section-title" href="#accordion-1">About</a>
  <div class="accordion-section-content" id="accordion-1">
    <p>Test Text</p>
  </div>
  <!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section"><a class="accordion-section-title" href="#accordion-2">Requirements</a>
  <div class="accordion-section-content" id="accordion-2">
    <p>Test Text 2</p>
  </div>
  <!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section"><a class="accordion-section-title" href="#accordion-3">Rules</a>
  <div class="accordion-section-content" id="accordion-3">
    <p>Test Text 3</p>
  </div>
  <!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->

Answer 1

您可以使用本w3schools指南设置它。

工作小提琴

​

var acc = document.getElementsByClassName("accordion");
var i; 

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc; 
}

div.panel {
    display: none;
}

<button class="accordion">About</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Requirements</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Rules</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

​

然而，这并不能确切地帮助您的代码，因此希望有人能够帮助您解决问题所在。

Answer 2

在你的JS Fiddle中有很多问题。

1. 找不到open类的CSS。
2. 您的close_accordion_section()函数从所有手风琴中删除类active，尝试使用href-attribute并将其作为param传递给该函数。
3. 这里有些东西应该是错的，因为无论用哪种方式，你都要调用这个函数，它只是关闭了所有的手风琴。

​

 if (jQuery(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      jQuery(this).addClass('active');
      // Open up the hidden content panel
      jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

​

您的代码太随意，无法帮助，请进行这些更改，然后再问一次。谢谢!