如果我使用Javascript将其隐藏在CSS上，如何显示div标签？

Question

在CSS中，我有一个div标签，就像评论部分一样，但我希望它隐藏起来，直到用户点击评论图片。当用户使用JavaScript点击它时，如何进行div显示？

HTML ：

<div class = "comments">
   <img onclick = "commentBar()" src = "comment.png" />
</div>

CSS：

.comments{
   width: 200px;
   height: 200px;
   background-color: blue;
   display: none;
}

单击图像时如何重新显示div标签？

Answer 1

当使用display: none隐藏元素时，其后代也会被隐藏。您无法隐藏父母，然后有选择地显示一些孩子。因此，＆＃34;评论图像＆＃34;不会出现让用户能够点击它。

你可以做的是让隐藏在div之外的切换按钮。或者将评论移动到图像的兄弟，并隐藏而不是父母：

<div class="comments">
  <img onclick="..." ...>
  <div class="the-actual-comments">
    ...
  </div>
</div>

与

.comments {
  /* no display: none */
}
.the-actual-comments {
  display: none;
}

至于onclick中的内容，我猜你知道如何获取.the-actual-comments元素并将其style.display设置为'block'。