如何隱藏div，當它來自while循環

Question

div將創建while while loop.i想要點擊類accordion1.i要隱藏accordion1body div。

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div id="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div id="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
    <?php } ?> 

這個腳本我用於隱藏option.it將只工作第一循環。

<script> 
    $(document).ready(function() 
    { 
    $("#accordion1").click(function() 
    { 
    $("#accordion1body").slideToggle(); 
    }); 
    }); 
    </script> 

如果產生了div.how不同的ID，我可以使用腳本點擊功能

Answer 1

id工作作爲唯一的標識符，而class擔任組標識符。所以使用class而不是id。下面是例子： -

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div class="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div class="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
<?php } ?> 
<script src = "//code.jquery.com/jquery-2.2.3.min.js"></script> <!-- jquery library needed --> 
<script> 
$(document).ready(function() { 
    $(".accordion1").click(function() { //click event using class attribute 
    $(this).next(".accordion1body").slideToggle(); // hide and show corresponding `accordion1body` div on click of `accordion1` div 
    }); 
}); 
</script> 

Answer 2

的id應該是唯一的可以用於識別單個元素，因爲有你需要使用元素的組class而不是在這裏。

PHP：

<?php while($timeline1=mysqli_fetch_assoc($timeline)) 
       { ?> 
    <div class="accordion-section"> 
        <div class="accordion1"> 
        <img src="images/user.jpg"> 
        <div class="triangleshape"></div> 
        <div class="tit">3rd Feb 2016 - Hospital Visit</div> 
        <div class="righticon"><i class="fa fa-angle-down"></i></div> 

        </div> 
        <div class="accordion1body"> 
         <p>The best-known type of hospital is the general hospital, which has an emergency department..</p> 
        </div> 
       </div> 
<?php } ?> 

JQUERY：jQuery的

$(document).ready(function() { 
 
    $(".accordion1").click(function() { // bind click event using class 
 
    $(this).next(, this).slideToggle(); // get the div next to clicked element 
 
    // you can simply use next() or next(".accordion1body") , second one only works when next element is `.accordion1body` 
 
    }); 
 
});