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

问题描述：

我一直试图在我的tumblr页面上设置过去9个小时，并且我没有尝试任何工作。我使用Google和Google搜索，尝试了20种不同的方法，并且我被卡住了。试图在我的tumblr页面上设置手风琴部分

我设置了一个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-->

答

您可以使用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>

然而，这并不完全帮助你的代码，所以希望有人能帮助你什么是错的。

答

在你的JS小提琴中有很多问题。

找不到类open的CSS。
你close_accordion_section()功能从所有的手风琴，尝试使用href -attribute和传递，作为一个参数去这个功能可以去除active类。
这里的东西应该是错误的，因为您称之为函数的任何一种方式都会简单地关闭所有的手风琴。

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页面上设置手风琴部分

相关推荐