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标头，然后为每个标头附加一个事件监听器。在点击事件上，您可以切换部分内容元素上的不可见类，在本例中为“＆lt; p＆gt;”。

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/

在h1标题上进行元素内容切换，单击纯Javascript

1 个答案: