带有未知数量的项目的Jquery切换

Question

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

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

<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>

我尝试了来自 toggling dynamically created divs in jquery 的建议以使用 on 和来自 Toggle dynamically created divs 的建议以使用 next/prev，但是当我使用这些时没有任何反应，并且 DevTools 中没有任何帮助

谁能指出我正确的方向，这样当我点击每个箭头时，只会出现其展开的框？ http://jsfiddle.net/pgJf4/

谢谢

Answer 1

使用它来获取目标元素

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

Answer 2

您可以在同一 inner 元素中定位展开的元素

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

演示：Fiddle

• .closest()