带有动态元素的下滑动画

Question

我想为我的网站建立一个购物车。 此页面动态显示某人之前在列表中选择的所有项目。 对于每个项目，我想制作一个向下滑动的切换链接以显示每个项目的更多选项

HTML 和 PHP

 <p> <span id="inquiryCartSlideDown" class="linkArrow">change order</span> </p> <div id="moreInfoInquiryCart" class="collapse"> my div with labels and inputs </div>

当客户通过 foreach 循环购买商品时，我的 PHP 会经常回显此 div。 所以我多次使用相同的 ID 获得相同的 div。

JS

 `$(function(){ $("#inquiryCartSlideDown").click(function(){ $("#moreInfoInquiryCart").slideToggle("slow"); }); });`

这有效，但仅适用于第一项。 问题可能是我正在使用 id。 但是我应该怎么做呢。

Answer 1

您可以使用 JQuery 的on函数，它也适用于动态元素：-

$(function(){
    $('.linkArrow').on('click', function() {
        $(this).closest(".collapse").slideToggle("slow"); 
    });
});

希望这可以帮助。！！

Answer 2

首先保留display:none要滑动切换的 div。 像这样。

HTML代码。

<p>
    <span id="inquiryCartSlideDown" class="linkArrow">change order</span>
</p>
<div id="moreInfoInquiryCart" class="collapse" style="display: none;">
    my div with labels and inputs
</div>

jQuery 代码。

$(document).ready(function() {
    $('.linkArrow').on('click', function() {
        $('#moreInfoInquiryCart').slideToggle(); 
    });
});