php - div 展开和折叠在我的 PHP 代码中不起作用

Question

在我的 php 页面中，我有以下代码:-

 <?php
     include ('dbConnect/dbConnect.php');
     $query = "Select * from RitualType";
     $queryResult = mysqli_query($dbcon, $query);
?>
<!--    <div class="panel-grid-cell" id="pgc-110-6-1" >--><br/>
<div class="row-fluid" style="">
    <div class="col-md-4" id="" style="position: fixed; left: 50pt; width:254px;height:50px; top: 87px; z-index: 99999999;" >
        <div class="textwidget" ><?php $i = 0;
            while ($row = mysqli_fetch_array($queryResult)) {
                ?><div id="SpanHoma">
                     <span class=""  style="color: red;font-size: 14px;"><strong><?php echo $row['Name'] ?></strong></span>
                     <div class="textwidget" id="RitualsGroup" style="display:none;">
                     <?php
                          $query1 = "Select * from Rituals where RitualTypeId=" . $row['Id'];
                          $queryResult1 = mysqli_query($dbcon, $query1);
                     ?>  
                     <?php while ($row1 = mysqli_fetch_array($queryResult1)) { ?>
                        <div class="Homas" > <?php echo "<a style='color: #000000;' href='#" . $row1['Id'] . "'>" ?>
                            <i class="fa fa-hand-o-right"></i> <span class="what-we-offer" style="color: #000000;"> 
        <?php echo $row1['Name'] ?> </span><?php echo '</a>'; ?><br />
            </div><?php $i++;
        } ?>
        </div></div><?php } ?>
            </div>
       </div>
  </div>

RitualType 是标题，Rituals 是内容。我需要使 div 展开和折叠。现在页面是这样的

A
B
C
D
E

当我点击 A 时，A 的内容显示如下

A
  a 
  b
  c
B
C
D
E

但是当我单击 B 时，div 没有展开。它仅适用于 A。我希望在单击主标题时打开特定的 div。

Javascript 切换的代码如下所示

 $(function () {

      $("#SpanHoma").on("click", function () {

           $("#RitualsGroup").toggle();
      });
      $('.RitualsGroup').hide();
 }); 

Answer 1

你需要这样尝试(将 id 转换为 html 中的类并更改 javascript 代码，如下所示):-

$(function () { 
   $(".SpanHoma").on("click", function () {
      $(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
   }); 
});

$(function () { 
       $(".SpanHoma").on("click", function () {
          $(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
       }); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "SpanHoma">
  <span>A</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>c</li>
    <li>d</li>
    <li>e</li>
   </div>
</div>

<div class= "SpanHoma">
  <span>B</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>f</li>
    <li>g</li>
    <li>h</li>
   </div>
</div>