jQuery slideToggle在动态添加的div上

Question

我有一些使用slideToggle的代码。

目前，我正在为每个内容位（即，内容一，内容二，内容三）编写jquery以使用该slideToggle。

我的问题是我想开始添加动态内容，因此我想将硬编码的content-xx链接更改为仅内容并进行扩展，但是我不确定如何做到这一点。

我的代码如下：

<div><a class="expand-one" href="#">[ - ]</a></div>
<div class="clearboth"></div>
<div class="content-one">
    // Content in here
</div>

<div><a class="expand-two" href="#">[ - ]</a></div>
<div class="clearboth"></div>
<div class="content-two">
    // Content in here
</div>

<div><a class="expand-three" href="#">[ - ]</a></div>
<div class="clearboth"></div>
<div class="content-three">
    // Content in here
</div>

<script>
    $(document).ready(function(){
        $('.expand-one').click(function(){
            $('.content-one').slideToggle('slow');
            return false;
        });
        $('.expand-two').click(function(){
            $('.content-two').slideToggle('slow');
            return false;
        });
        $('.expand-three').click(function(){
            $('.content-three').slideToggle('slow');
            return false;
        });
    });
</script>

如您在这里看到的，我为内容的每一位写了一些jquery块，但是在添加动态内容时这不起作用。

有什么办法可以将expand-xxx更改为expand-xxx，将content-xxx更改为仅内容，以便我可以添加尽可能多的内容块，并仍然对每一个单独的内容位保持slideToggle？

Answer 1

您可以将php用于内容div，在使用jquery事件后获取data-id显示内容在此处输入图像描述

Answer 2

您可以这样做：

 $(document).ready(function() {
   $('.expand').click(function() {
     $(this).parent().nextAll('.content').first().slideToggle('slow');
     return false;
   });
 });

在线演示（jsFiddle）