具有未知项数的Jquery切换

我有一些动态创建的内容，其中可能有2个或200个DIV-每个DIV都有一些我想要切换的内容和一个箭头来显示内容

我可以让toggle etc正常工作，但当它切换时，它会切换所有内容（即，所有具有类名的项目-正如它应该的那样），但我只希望它切换相关的项目

<div id="outer">
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>
    <div class="inner">
        <div class="left">
            <div class="expanded">
                12345
            </div>
        </div>
        <div class="right">
            <div class="arrow-down"></div>
        </div>
    </div>    
</div>

12345
12345
12345

我尝试了从到使用on和从到使用next/prev的建议，但当我使用这些时，什么都不会发生，DevTools中也没有任何帮助

有人能给我指出正确的方向吗？这样当我单击每个箭头时，只会显示其展开的框

---

谢谢

您可以在同一

内部

元素中定位扩展的元素

$(".arrow-down").click(function () {
    $(this).closest('.inner').find('.expanded').toggle("slow");
});

演示：

---

使用此选项获取目标元素

$( ".arrow-down" ).click(function() {
  $(this).parent().parent().find('.expanded').toggle( "slow" );
});

---

使用事件委派可能会很有用。这样，只有一个事件处理程序，并且在添加新元素时不需要重新应用单击处理程序：@Munter yes如果项目是动态添加的，则可能需要事件委派