製作元素內容在h1標題上切換點擊純粹的Javascript

Question

我想在點擊h1標題時切換一些內容。 我希望能夠點擊h1標題並使其下的部分隱藏或顯示。

對於Javascript，我試圖選擇所有（5）部分，但不是h1，它們都在旁邊元素中。我也無法弄清楚這一點。

請看看我的代碼，讓我知道你會做什麼。

HTML

<aside> 
    <h1><a href="#">Title</a></h1> 
     <section> 
      <h1>Foo</h1> 
      <p> 
       Foo 
      </p> 
     </section> 
     <section> 
      <h1>Foo</h1> 
      <p> 
       Foo 
      </p> 
     </section> 
     <section> 
      <h1>Foo</h1> 
      <p> 
       Foo 
      </p> 
     </section> 
     <section> 
      <h1>Foo</h1> 
      <p> 
       Foo 
      </p> 
     </section> 
     <section> 
      <h1>Foo</h1> 
      <p> 
       Foo 
      </p> 
     </section> 
    </aside> 

CSS

.invisible { 
    display: none; 
} 

JS

// select 
var laatste = document.querySelector('aside h1:not(:first-of-type)'); 

// hide 
laatste.classList.add('invisible'); 

// toggle 
document.querySelector('aside > h1').onclick = function() { 
    if (laatste.className === "invisible") { 
    laatste.classList.remove('invisible'); 
    } 
    else { 
    laatste.classList.add('invisible'); 
    } 
} 

我不能使用jQuery並添加類或div的我的HTML。

Answer 1

您可以選擇所有h1標題，然後爲每個標題添加一個事件監聽器。在點擊事件之後，您可以切換段內容元素上的不可見類，在這種情況下爲「<」，「>」。

JAVASCRIPT：

//select 
var all_headers_list = document.querySelectorAll('aside section h1'); 

//toggle 
for (i = 0; i < all_headers_list.length; ++i) { 
    var entry = all_headers_list[i]; 

    entry.addEventListener('click', function(e) { 
      var header = e.target; 

      if (header.className === 'invisible_content') { 
       header.classList.remove('invisible_content'); 
       showSectionContent(header.parentNode) 
      }else { 
       header.classList.add('invisible_content'); 
       hideSectionContent(header.parentNode); 
      } 
    }); 
} 

function hideSectionContent(section){ 
    var section_content = section.querySelector('p'); 
    if(section_content != undefined) section_content.classList.add('invisible'); 
} 

function showSectionContent(section){ 
    var section_content = section.querySelector('p'); 
    if(section_content != undefined) section_content.classList.remove('invisible'); 
} 

CSS：

.invisible_content {} 

.invisible { 
    display: none; 
} 

注意，invisible_content類是有剛需在這種情況下隱藏的內容的指標。

例：http://jsfiddle.net/4cqcL0Lg/