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的標題和儀式的內容。 我需要使div展開並可摺疊。現在的網頁是這樣

A 
B 
C 
D 
E 

當我點擊一個則越來越顯示如下

A 
    a 
    b 
    c 
B 
C 
D 
E 

A的內容但是當我點擊B中的DIV是沒有得到擴大。它只適用於A.我想要特定的div打開時，我單擊主標題。

Javascript守則toggle如下所示

$(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>

Answer 2

它因爲你給多個div相同的id。試試這個：

改變這一點：

<div id="SpanHoma"> 

到

<div class="SpanHoma"> 

和

<div class="textwidget" id="RitualsGroup" style="display:none;"> 

到

<div class="textwidget RitualsGroup" style="display:none;"> 

在jquery：

$(function() { 

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

        $(this).find(".RitualsGroup").toggle(); 
       }); 

      });