展开/折叠jQuery - 编程之家

如何解决展开/折叠jQuery

| 我正在一个在线购物网站上。我有一个展开/折叠jQuery设置。但理想情况下，我希望当用户单击折叠时，购物车项目的完整列表折叠为不可见。目前，如果用户的购物车中有多个商品，则仅关闭该商品。我该如何级联以关闭所有项目？例子在这里

解决方法

尝试使用：

$(\".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\');

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

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

, 根据脚本，它将更改下一个元素的状态。您需要重新编写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>

这里给你的例子。