javascript - 切换多个 div 对的可见性？

Question

我正在尝试编写一个包含许多“文章”的页面。

列出了每篇文章的标题。如果观众想阅读该文章，他们可以单击标题。 这会导致显示包含文章文本的 div。

默认情况下，任何文章的文本都不应该是可见的。

我在处理这样一个事实时遇到了很多麻烦:每个文章标题只能切换它自己的文本，而不是所有文本，即使它们共享同一个类。

是否可以编写类似这样的代码，而无需手动为每个文章文本提供自己的唯一 ID？

我想我可以将每篇文章标题+文本包装在它自己的 div 中。然后进行某种检查，告诉它仅在 div 处于同一级别时才显示可见性(即与标题位于同一 div 中)。

有人可以提供一些指导吗？

谢谢!

PS:我想坚持使用纯 html/javascript 解决方案，但我已经标记了 jquery，以防有一种简单的方法可以使用该解决方案来实现这一点。我需要避免使用 PHP，因为它不在服务器上。

Answer 1

jQuery 确实让这一切变得简单。如果您的 HTML 如下所示:

<h1>Article 1</h1>
<div class="content">
    <p>This is the content of article 1.</p>
</div>
<h1>Article 2</h1>
<div class="content">
    <p>This is the content of article 2.</p>
</div>
<h1>Article 3</h1>
<div class="content">
    <p>This is the content of article 3.</p>
</div>

这就是您需要的所有 JavaScript(带 jQuery):

$(".content").hide();
$("h1").click(function() {
    $(this).next().toggle("fast");
});​

<强> Try it在 JSFiddle 上。

如果您出于某种原因不想使用 jQuery(因为您没有将它用于其他任何用途，而且它太大而无法证明这一点)，您可以使用纯 JavaScript:(注意: 可能只适用于较新的浏览器)

Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(function(element) {
    element.style.display = 'none';
});
document.body.addEventListener('click', function(e) {
    if(e.target.tagName.toLowerCase() !== 'h1') {
        return;
    }
    e.preventDefault();
    var content = e.target;
    while(content.nodeType != Node.ELEMENT_NODE || !/\bcontent\b/.test(content.className)) {
        content = content.nextSibling;
    }
    if(content.style.display === 'none') {
        content.style.display = '';
    }else{
        content.style.display = 'none';
    }
}, false);

<强> Try it在 JSFiddle 上。