아코디언 메뉴의 두 번째 메뉴가 열리지 않음

이 아코디언 메뉴를 사용하고 있습니다.아코디언 메뉴의 두 번째 메뉴가 열리지 않음

자바 스크립트 :

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와 같은 블록 수준 요소가 포함될 수 없습니다. How can I put DIV in P? 및 P tag

click 이벤트는 DOM 요소와 DIV 요소를 변경 브라우저로 P 태그의 내부에서 제거하고, 원래의 HTML 구조를 위해 작동하지 않았다

<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>

(이유를 설명했다 참조

위의 참조 링크 포함). 이 DOM 변경으로 인해 nextElementSibling을 검색하는 동안 문제가 발생했습니다.

문제가 해결되면이 대답을 수락하십시오.

출처

2016-11-22 09:22:06 dinesh

아코디언 메뉴의 두 번째 메뉴가 열리지 않음

답변

관련 문제