手風琴網站遇到問題

Question

我不確定問題是否與代碼或我如何實現它。我在Joomla工作！並試圖使用我從http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol獲得的模板將手風琴添加到我的一個頁面中。該代碼使用HTML，CSS和JavaScript，問題似乎與JavaScript。這位手風琴家看起來應該是這樣，但並不打算展示內容。以下是代碼。

CSS：

<style> 
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: #ddd; 
} 

button.accordion:after { 
content: '\002B'; 
color: #777; 
font-weight: bold; 
float: right; 
margin-left: 5px; 
} 

button.accordion.active:after { 
content: "\2212"; 
} 

div.panel { 
padding: 0 18px; 
background-color: white; 
max-height: 0; 
overflow: hidden; 
transition: 0.6s ease-in-out; 
opacity: 0; 
} 

div.panel.show { 
opacity: 1; 
max-height: 500px; 
} 
</style> 

HTML：

<h2>Accordion with symbols</h2> 
<p>In this example we have added a "plus" sign to each button. When the user   clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
<button class="accordion">Section 1</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">Section 2</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">Section 3</button> 
<div id="foo" 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> 

的Javascript：

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

for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
    this.classList.toggle("active"); 
    this.nextElementSibling.classList.toggle("show"); 
} 
} 
</script> 

我跟着就如何落實JavaScript插入的Joomla所有指令！但我仍然有麻煩。任何幫助將不勝感激。

Answer 1

您的代碼在代碼段中運行良好。你如何將JavaScript添加到Joomla？

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

 
for (i = 0; i < acc.length; i++) { 
 
acc[i].onclick = function(){ 
 
    this.classList.toggle("active"); 
 
    this.nextElementSibling.classList.toggle("show"); 
 
} 
 
}

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: #ddd; 
 
} 
 

 
button.accordion:after { 
 
content: '\002B'; 
 
color: #777; 
 
font-weight: bold; 
 
float: right; 
 
margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
content: "\2212"; 
 
} 
 

 
div.panel { 
 
padding: 0 18px; 
 
background-color: white; 
 
max-height: 0; 
 
overflow: hidden; 
 
transition: 0.6s ease-in-out; 
 
opacity: 0; 
 
} 
 

 
div.panel.show { 
 
opacity: 1; 
 
max-height: 500px; 
 
}

<h2>Accordion with symbols</h2> 
 
this example we have added a "plus" sign to each button. When the user   clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
 
<button class="accordion">Section 1</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">Section 2</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">Section 3</button> 
 
<div id="foo" 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>