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

Question

在过去的 9 个小时里，我一直在尝试在我的 tumblr 页面上设置它，但我尝试的任何方法都不起作用。我在谷歌上搜索了又搜索，尝试了 20 种不同的方法，但我被卡住了。

我设置了一个 JSfiddle，这样可以更轻松地了解我的目标（和失败目标）。谁能告诉我我做错了什么？

<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

您可以使用this guide on w3schools进行设置。
工作 fiddle

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 有很多问题。

找不到 class open 的 CSS。
您的 close_accordion_section() 函数从所有手风琴中删除 class active，尝试使用 href-属性并将其作为参数传递给这个功能。
这里应该有什么地方不对，无论你怎么称呼它简单地关闭所有手风琴的功能。

 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');
    }

您的代码太随意，无法提供帮助，请进行这些更改，然后再询问。谢谢！

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

Trying to set up an accordion section on my tumblr page

javascript

jquery

html

css

tumblr