Question

div将从while循环创建。我想点击类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 } ?>

这个脚本我用于hide option.it只能用于第一次循环。

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

如果为div.how生成单独的id，我可以使用脚本点击功能

Answer 1

id在jquery中作为唯一标识符，而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：

＆＃13;

$(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`
  });
});

＆＃13;

当div来自while循环时如何隐藏div

2 个答案: