Question

我在这里用PHP创建html

<?php
while(){
  ?>
 <a  id="click_to_expand-1" class="btn btn-default btn-sm "> more</a>
 <div id="expand_content-1" class="row extra-detail-gist" style="display: none;">
      <ul class="extra-feature-gist">
          <li>
           <p><strong>Baths :</strong><span class="text-success"> <?php echo $rw["baths"]; ?></span></p>
          </li>
      </ul>
<?php
}
?>

这是我的Jquery代码

$(function(){
        $('.row.extra-detail-gist').css('display','none');
        $('.btn.btn-default.btn-sm').click(function(){
            $('.row.extra-detail-gist').slideToggle('slow');
            $(this).toggleClass('slideSign');
            return false;
        });
    });

此代码适用于所有已创建的div，并且所有div都在点击时显示。如果每次点击“更多”，我可以如何区分？

已更新：这段代码适用于第一个......但其余的记录都不起作用

$(function(){
        $('#expand_content-1').css('display','none');
        $('#click_to_expand-1').click(function(){
            $('#expand_content-1').slideToggle('slow');
            $(this).toggleClass('slideSign');
            return false;
        });
});

这是JSFIDDLE

Answer 1

试试这个：

工作Example

$(document).on('click','.btn.btn-default.btn-sm',function(){
    $(this).parent().next('.row.extra-detail-gist').slideToggle('slow');
    $(this).toggleClass('slideSign');
    return false;
});

使用此行$('.row.extra-detail-gist')，您选择的所有divs都有row extra-detail-gist类。

用于动态创建元素的Jquery Selector

1 个答案: