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 over http://jsfiddle.net/RxDcK/

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

提前感谢您的帮助

Answer 1

那是因为你在最顶端的div .next上调用了#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中找到了.product_slidedown div。

Answer 3

尝试

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

演示：Fiddle

Answer 4

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

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

.next jQuery无法正常工作 - 需要切换多个div

4 个答案: