Javascript：选择元素的下一个兄弟元素并通过单击更改其类（不使用 ID）

Question

我想在CSS单击元素后立即将类名添加到元素的下一个兄弟元素以获得简单的显示/隐藏效果

我有以下 html 输出，但我没有元素 ID。

<div class="news-message">
  <div class="message-head"> Headline of Message 1 </div>
  <div class="message-content"> Here comes the content of message 1 </div>
</div>
<div class="news-message">
  <div class="message-head"> Headline of Message 2 </div>
  <div class="message-content"> Here comes the content of message 2 </div>
</div>
<div class="news-message">
  <div class="message-head"> Headline of Message 3 </div>
  <div class="message-content"> Here comes the content of message 3 </div>
</div>

    

现在我想隐藏消息内容并只显示标题（使用 很容易实现display: none）。

只要我点击标题，我就希望显示该特定消息的内容。

所以我的想法是通过单击消息头将一个CSS“可见”类添加到DIV“消息内容”中，然后再单击一次将其删除。

所以我在“pm-head”元素和以下javascript中添加了一个“onClick="changeClass()”

function changeClass() {
  var hidecontent = document.querySelectorAll('.message-content');
  var i;
  for (i = 0; i < hidecontent.length; i++) {
    hidecontent[i].classList.toggle('visible');      }    }

但这会添加对该页面上所有“消息内容”div 可见的类，而我只需要将它添加到我单击的“pm-head”元素的下一个同级元素。

我不能在这个上使用 jquery 或其他框架/库。

抱歉，我是 javascript 新手，可能是一个容易回答的问题。

谢谢约翰

Answer 1

nextSibling是您寻求的答案。没有自己测试，但这应该适合你：

function changeClass(e) {
    e.target.nextSibling.classList.toggle("visible");
}