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");
}