JavaScriptとCSSアコーディオンリスト

Question

私はCSSとJavaScriptを使用してアコーディオンリスト用のコードを用意しています。見出しをクリックすると、隠しコンテンツが表示されます。どのように私はこれを行うので、同じ見出しをクリックするとコンテンツを再び隠すでしょうか？何でも助けてくれる、歓声。

(function() { 
 
    var accordions, i; 
 
    
 
    // Make sure the browser supports what we are about to do. 
 
    if (!document.querySelectorAll || !document.body.classList) return; 
 
    
 
    // Using a function helps isolate each accordion from the others 
 
    function makeAccordion(accordion) { 
 
    var targets, currentTarget, i; 
 
    
 
    targets = accordion.querySelectorAll('.accordion > * >h1 '); 
 
    for(i = 0; i < targets.length; i++) { 
 
     targets[i].addEventListener('click', function() { 
 
     if (currentTarget) 
 
      currentTarget.classList.remove('expanded'); 
 
     
 
     currentTarget = this.parentNode; 
 
     currentTarget.classList.add('expanded'); 
 
     }, false); 
 
    } 
 

 
    accordion.classList.add('js'); 
 
    } 
 

 
    // Find all the accordions to enable 
 
    accordions = document.querySelectorAll('.accordion'); 
 
    
 
    // Array functions don't apply well to NodeLists 
 
    for(i = 0; i < accordions.length; i++) { 
 
    makeAccordion(accordions[i]); 
 
    } 
 
    
 
})();

<style> 
 
.accordion.js > * { 
 
    overflow: hidden; 
 
} 
 

 
.accordion.js > *:not(.expanded) > *:not(h1) { 
 
    max-height: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.accordion.js > .expanded > *:not(h1) { 
 
    max-height: 10em; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > h1 { 
 
    cursor: pointer; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > *:not(h1) { 
 
    transition: max-height 0.7s, 
 
    visibility 1s, 
 
    margin 1s, 
 
    opacity 1s; 
 
} 
 

 
.sections { 
 
color:#5E5E5E; 
 
text-align:center; 
 
width:90%; 
 
border-style:solid; 
 
border-width:1px; 
 
border-color:#D1D1D1; 
 
padding: 0 .5em; 
 
background-color:#FFFFFF; 
 
border-radius:3px; 
 
} 
 
</style>

<section class="accordion"> 
 
    <section class="sections"> 
 
    <h1>A</h1> 
 
    <p>All content for A.</p> 
 
    </section> 
 
    <br style="line-height:5px"/> 
 
    <section class="sections"> 
 
    <h1>B</h1> 
 
    <p>All content for B</p> 
 
    </section> 
 
    <br style="line-height:5px"/> 
 
    <section class="sections"> 
 
    <h1>C</h1> 
 
    <p>All content for C<p> 
 
    </section> 
 
</section>

Answer 1

これは動作するはずです。

私がしたのは、アコーディオンクラスがターゲットの親を終了しているかどうかを確認する条件を追加し、それがあれば削除することでした。それ以外の場合はすべて同じです。

(function() { 
 
    var accordions, i; 
 
    
 
    // Make sure the browser supports what we are about to do. 
 
    if (!document.querySelectorAll || !document.body.classList) return; 
 
    
 
    // Using a function helps isolate each accordion from the others 
 
    function makeAccordion(accordion) { 
 
    var targets, currentTarget, i; 
 
    targets = accordion.querySelectorAll('.accordion > * >h1 '); 
 
    for(i = 0; i < targets.length; i++) { 
 
     targets[i].addEventListener('click', function (e) { 
 
     /*Added the code below*/ 
 
     if (e.target.parentNode.classList.contains("expanded")) { 
 
      e.target.parentNode.classList.remove("expanded") 
 
     } else { 
 
     /*Else do the following, same as before */ 
 
     if (currentTarget) 
 
      currentTarget.classList.remove('expanded'); 
 
     
 
     currentTarget = this.parentNode; 
 
     currentTarget.classList.add('expanded'); 
 
     } 
 
     }, false); 
 
    } 
 

 
    accordion.classList.add('js'); 
 
    } 
 

 
    // Find all the accordions to enable 
 
    accordions = document.querySelectorAll('.accordion'); 
 
    console.log(accordions); 
 
    
 
    // Array functions don't apply well to NodeLists 
 
    for(i = 0; i < accordions.length; i++) { 
 
    makeAccordion(accordions[i]); 
 
    } 
 
    
 
})();

.accordion.js > * { 
 
    overflow: hidden; 
 
} 
 

 
.accordion.js > *:not(.expanded) > *:not(h1) { 
 
    max-height: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.accordion.js > .expanded > *:not(h1) { 
 
    max-height: 10em; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > h1 { 
 
    cursor: pointer; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > *:not(h1) { 
 
    transition: max-height 0.7s, 
 
    visibility 1s, 
 
    margin 1s, 
 
    opacity 1s; 
 
} 
 

 
.sections { 
 
color:#5E5E5E; 
 
text-align:center; 
 
width:90%; 
 
border-style:solid; 
 
border-width:1px; 
 
border-color:#D1D1D1; 
 
padding: 0 .5em; 
 
background-color:#FFFFFF; 
 
border-radius:3px; 
 
}

<section class="accordion"> 
 
    <section class="sections"> 
 
    <h1>A</h1> 
 
    <p>All content for A.</p> 
 
    </section> 
 
    <br style="line-height:5px"/> 
 
    <section class="sections"> 
 
    <h1>B</h1> 
 
    <p>All content for B</p> 
 
    </section> 
 
    <br style="line-height:5px"/> 
 
    <section class="sections"> 
 
    <h1>C</h1> 
 
    <p>All content for C<p> 
 
    </section> 
 
</section>