Question

我正在网上购物网站上工作。我有一个展开/折叠jQuery设置。但理想情况下，我希望当用户点击折叠时，购物车商品的完整列表会折叠为不可见。目前，如果用户的购物车中有多个商品，则只关闭1商品。

如何将其级联以关闭所有项目？

示例是here

Answer 1

尝试使用：

$(".toggle_container").slideToggle('2000');

目前，您的代码只是找到第一个项目并将其向上滑动。

您还可以将所有项目包含在主div中，并为其设置动画效果：

<div class="order_items">
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
</div>

使用以下JS：

$(".order_items").slideToggle('2000');

Answer 2

将要折叠的所有元素放在您使用jQuery定位的容器中。在这种情况下：.toggle_container。

伪标记：

<div class="toggle_container">
   <div class="product"></div>
   <div class="product"></div>
   <div class="product"></div>
</div>

Answer 3

根据脚本，它会改变下一个元素的状态。您需要重新编写HTML以包含项目周围的包装器div并重新分配脚本以折叠包装器。

jQuery：

    $("h2.trigger").click(function(){
        $(".items_wrapper").slideToggle(2000);
        return false; //Prevent the browser jump to the link anchor
    });

HTML：

<h2 class="trigger"><a href="#">Click me!</a></h2> 

<div class="items_wrapper">
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
</div>

Example for you here

展开/折叠jQuery

3 个答案: