jquery - .next jQuery 不工作 - 需要切换多个 div

Question

我需要切换一些 div 向下滑动等，并且一直在查看堆栈溢出，并且大多数帖子都指向使用 .next 函数，当我实现这个时，似乎什么也没发生。

我的 jQuery 是

$(document).ready(function(){
        $(".product_slidedown").click(function(){
            $(".slide_details").next('div.product_slidedown').slideToggle();
            });
        });

HTML是

<div class="product_slidedown" id="1">
        <div class="item_details_heading">
            Product Description
        </div>
        <div class="slide_details"></div>
    </div>
    <div class="product_slidedown" id="2">
        <div class="item_details_heading">
            Product Dimensions
        </div>
        <div class="slide_details"></div>
    </div>

jsFiddle 在http://jsfiddle.net/RxDcK/

如果我取出 .next 函数，它可以工作，但会滑下两个 div。

预先感谢您的帮助

Answer 1

那是因为您正在调用.next最顶层的 div #2，. .slide_details是 的孩子div.product_slidedown，因此调用 next 不会返回任何内容。

将您的点击绑定更改为：

    $(document).ready(function(){
    $(".item_details_heading").click(function(){           
        $(this).next().slideToggle();
        });
    });

Answer 2

我相信这就是您正在寻找的，请尝试：

http://jsfiddle.net/RxDcK/1/

$(document).ready(function () {
    $(".product_slidedown").click(function () {
        $(this).find(".slide_details").slideToggle();
    });
});

使用上面的代码，您可以在单击.slide_details的 div 中找到 div 。.product_slidedown

Answer 3

尝试

$(document).ready(function () {
    $(".product_slidedown .item_details_heading").click(function () {
        $(this).next(".slide_details").slideToggle();
    });
});

演示：小提琴

Answer 4

您也应该使用推荐的on()方法......如下所示：fiddle

$(document).ready(function () {
    $(".product_slidedown").on('click', function () {
        $(this).find(".slide_details").slideToggle();
    });
});