如何为同一页面上的多个 div 制作 jQuery 滑动切换效果？答案

【问题标题】：How to make jQuery slidetoggle effect for multiple div on same page?如何为同一页面上的多个 div 制作 jQuery 滑动切换效果？
【发布时间】：2010-06-15 10:31:30
【问题描述】：

它适用于一个div

(function($) { 
     $(document).ready(function(){
        $('#div1').hide();
        $('a.plus').click(function(){
           $('#div1').slideToggle();
           $(this).toggleClass("minus_icon"); 
           return false;
        });
     });
})(jQuery);

如何为同一页面上的多个div 制作此幻灯片工具效果？我有多个具有不同 ID 的 divs 要隐藏，例如 #div1、#div2、div#3。

编辑：

这是html中的情况

<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>

【问题讨论】：

当你说“<a id="plus"> 完全一样”时，我希望你不是说你有多个 ID 为 plus 的元素。因为那是不允许的。 ID 必须是唯一的。
+1 是的，你是对的。这是我的错。
你是说<a>元素和<div>元素之间存在一对一的关系？
@patrick - 不，我将 a id="plus" 更改为 a class="plus"
是的，但我的意思是，对于每个<a>，有一个<div>，还是有几个？

标签： javascript jquery css xhtml

【解决方案1】：

(函数($){ $(文档).ready(函数(){ $('#div1, #div2, #div3').hide(); $('a.plus').click(function(){ $(this).next().slideToggle(); $(this).toggleClass("minus_icon"); 返回假； }); }); })(jQuery);

【讨论】：

@HiddenChilli - 谢谢它的工作。我们能再做一件事吗？我想让它动态化。看到我在这里使用 div 像 div1 div2 div3。是否可以像div'+substr($(this).id, 4) 那样仅使用@div 来产生相同的效果
例如我的div id 将始终具有相同的格式div1、div2 或div11、div12。所以我想让这段代码动态化，那么就不需要修改 jquery 文件，当我将在HTML 中添加更多div 时。对我的客户来说会更容易。
哦，我明白你的意思是 $('div.description').hide()？
试试这个：$('a.plus').next().hide();

【解决方案2】：

假设你的 HTML 是这样的：

<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>

然后，拥有这样的功能将适用于您拥有的尽可能多的 a.plus / div 对：

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       $(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

如果您的a.mores 无论出于何种原因与divs 本身相去甚远，则您必须在a.more 上设置一个属性以将其链接到一个div，例如。 (HTML)

<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>

... some more HTML

<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>

和 Javascript：

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       var id = 'div' + $(this).attr('data-article');
       $('div#' + id).slideToggle();
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

【讨论】：

感谢您的回答和努力，但我不想添加无效的data-article="1"
您可以稍微修改 Adam 的解决方案 - 而不是使用数据文章属性，而是为您的 a 标签添加 class="plus" 附加 id，其编号对应于适当的 div，如下所示：显示更多然后使用 var id = 'div'+substr($(this).id, 4); （希望我得到 substr 函数的参数正确）。

【解决方案3】：

给你的 div 赋予相同的类（比如 'div_to_toggle'），然后你可以使用一个选择器来代替 $('#div1'), $('#div2'), ... 你可以使用一个选择器：$('.div_to_toggle' ) 将全部选中：

$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();

【讨论】：

现在，当我点击一个框的时，它会打开所有框。现在我要试试你的解决方案
它不工作。当我为一个框单击时，它会打开所有框。