未打開手風琴菜單的第二個菜單

的JavaScript：

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

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

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<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: '\02795'; 
    font-size: 13px; 
    color: #777; 
    float: right; 
    margin-left: 5px; 
} 

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

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> 
</head> 
<body> 
    <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 3</button> 
    <div id="foo" class="panel"> 
     <p> 
      <button class="accordion">Section 3</button> 
      <div id="foo" class="panel"> 
       <p></p> 
      </div> 
     </p> 
    </div> 
</body> 
</html>

我需要使用在第3節的第二個菜單我在這個摺疊式菜單添加到另一個摺疊式菜單，但它確實沒開。任何想法爲什麼？我怎麼解決這個問題？

來源

2016-11-22 Kianoush

在下面的HTML結構中，我用DIV標記替換了P標記。 P元素不能包含DIV等塊級元素。

編號：How can I put DIV in P?和P tag

<body> 
    <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 3</button> 
    <div id="foo" class="panel"> 
     <div> 
      <button class="accordion">Section 3</button> 
      <div id="foo" class="panel"> 
       <div> 
        test 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

單擊事件並沒有對原來的HTML結構工作，因爲改變了DOM元素和DIV元素的瀏覽器是從p標籤內刪除（解釋原因與上述參考鏈接）。當我們檢索nextElementSibling時，此DOM更改導致了問題。

接受這個答案，如果它解決了你的問題。

來源

2016-11-22 09:22:06 dinesh

未打開手風琴菜單的第二個菜單

回答

相關問題