小编Joh*_*982的帖子

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

我想在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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

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