如何在while循环中设置javascript默认隐藏div

Question

我有一个 JavaScript 来切换显示/隐藏 div 类。 div 的内容和激活切换功能的按钮在 while 循环中。起初我在我的 JavaScript 中使用了“div id”，但这不起作用，我决定使用“div class”来代替它，它工作得很好。但是，默认情况下我没有成功隐藏 div，我尝试在我的 CSS 中使用 display:none 和 visibility:hidden，但这根本不起作用（内容总是隐藏的）。如何使用下面的当前 JavaScript 使 div 默认隐藏：

JavaScript

<script language="JavaScript">
$(document).ready(function(){
$(".Comment").click(function(){
$(this).next(".reply").slideToggle("slow");                              
});                        
});

</script>

文件.php

<?php
.......................
  while($obj = $stmt->fetch())
    {

      $username = $obj['user_name'];
      $comment = $obj['comment'];
      $id = $obj['id'];
      $userimage = $obj['user_image'];

    echo '<div class="comment-item">';
    echo '<div class="comment-avatar">';
    echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
    echo '</div>';
    echo '<div class="comment-post">';
    echo '<span style="font-weight:bold;">'.$username.'&nbsp&nbspsaid...
    </span>';
    echo '<p>'.$comment.'</p>';
    echo ' <div class="Comment"><input type="button"value="Reply" ></div>';
    echo '<div class="reply">';
    echo '<form action="" method="post" class="reply"
    enctype="multipart/form- data">';
    echo '<textarea rows="4"  name="txtcomment" style="float:right;resize:  
    none;margin-top:5px;" cols="50" >';
    echo '</textarea>';
    echo '</form>';
    echo '</div>';

    echo '</div>';
    echo '</div>';  

    echo '</div>';

        }
    ?>

Answer 1

这应该可行。这是FIDDLE

<div class="comment">Show/Hide reply.</div>
<div class="reply">A reply from someone.</div>

<script language="JavaScript">
$(document).ready(function(){
    $(".reply").hide(); 
    $(".comment").click(function(){
      $(this).next(".reply").slideToggle("slow");                              
    });                        
}); 
</script>

您应该注意的事项：

Javascript 区分大小写，因此请确保 Comment 类中的 C 正确，文档和 javascript 中的 C 相同。

你不能在 CSS 中隐藏，你必须像下面这样隐藏它，否则 CSS 会覆盖 javascript。如果你想这样做，你可以将类更改为隐藏。

<div class="reply" style="display:none;">A reply from someone.</div>

我想我现在已经涵盖了所有内容。