не открывается второе меню меню аккордеона

Я использую это меню аккордеона.не открывается второе меню меню аккордеона

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 я заменяю тег P тегом DIV. Элемент P не может содержать элементы уровня блока, такие как DIV.

Ref: 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 тега (объяснила причину с приведенными выше ссылочными ссылками). Это изменение DOM привело к проблеме, когда мы возвращаем nextElementSibling.

Примите этот ответ, если он решит вашу проблему.

источник

2016-11-22 09:22:06 dinesh

не открывается второе меню меню аккордеона

ответ

Смежные вопросы