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（w / jQuery）：

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

JSFiddle上的

Try it。

如果你出于某些原因不想使用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);

JSFiddle上的

Try it。

Answer 2

这是一个类似的解决方案：

DEMO

基本上，您将一些动态数据添加到按钮的href以及包含要显示的内容的div的ID。

Answer 3

假设这是你的HTML：

<div class="article">
  <h2>title1</h2>
  <p>article1</p>
</div>
<div class="article">
  <h2>title2</h2>
  <p>article2</p>
</div>

这是你的CSS：

<style type="text/css">
  .article p { display:none; }
</style>

这将是一个不错的jQuery解决方案：

$(function()
{
  $('.article h2').click(function()
  {
    $('p', $(this).parent()).css('display','');
  });
});

切换多个div对的可见性？

3 个答案: