带有多个 div 的 jQuery slideToggle答案

【问题标题】：jQuery slideToggle with multiple divs带有多个 div 的 jQuery slideToggle
【发布时间】：2013-08-08 22:12:46
【问题描述】：

我正在尝试使用多个 div 进行滑动切换，但我似乎无法让它工作。

我已经在 2 div 布局中获得了我想要的基本功能：

http://jsfiddle.net/q6smW/

$(".replication").slideUp(500,function(){
    $(".duplication").slideToggle(500)
});

但我需要它来处理 3 或 4 个 div 而不仅仅是 2 个。

我几乎觉得代码应该是这样的：

$(".replication").slideUp(500, function($(".duplication").slideUp(500,function()){    
     $(".thirdclass").slideToggle(500)
});

感谢任何帮助。

【问题讨论】：

标签： jquery html slidetoggle jsfiddle slideup

【解决方案1】：

基本上，您需要使所有内容都通用化，以便用共同点来处理它。

首先，我会把你的标记改成这样，注意数据属性：

<div class="dupImage img" data-menu="duplication"><img /></div>
<div class="repImage img" data-menu="replication"><img /></div>

<div class="menuitem" id="duplication">
    <h3>Duplication</h3>
    <ul>
        <li>CDs, DVDs or Blu-Rays</li>
        <li>CDs, DVDs or Blu-Rays</li>
    </ul>
</div>

<div class="menuitem" id="replication">
    <h3>Replication</h3>
    <ul>
        <li>CDs, DVDs or Blu-Rays</li>
        <li>CDs, DVDs or Blu-Rays</li>
    </ul>
</div>

然后将你的脚本压缩成这样：

var menu;
$(document).ready(function(){
    $('.menuitem').hide();
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".menuitem:not(#" + menu.attr("id") + ")").slideUp(500,function(){
             menu.slideDown(500);
        });
    });   
});

这是一个小提琴：

http://jsfiddle.net/MXusL/1/

希望对您有所帮助，祝您的应用好运！

【讨论】：

很棒，但是当我添加第三个菜单项时，功能完全改变了。这是不希望的，因为我希望保持相同的上滑/下滑切换功能。 jsfiddle.net/MXusL/2

【解决方案2】：

我建议将您的图像 div 包装在一个容器中，并对您的信息 div 执行相同的操作。要么使用同一个容器，要么使用两个单独的容器——由你决定。然后在点击图片div时使用，隐藏你所有的info div，只显示对应的info div，通过使用div相对于容器的索引的方式。您可以使用 jQuery 的 index() 函数。它还简化了您的代码。

【讨论】：

你能举个例子吗？
@NateBradshaw，我的解决方案实际上类似于 Moby 的解决方案。所以我很好奇你对他的解决方案的评论。如果您在添加新菜单项时遵循相同的模式，它应该适用于我们的任一解决方案。
弗兰克，请耐心等待，因为我对此很陌生。我正在尽力了解正在发生的事情，但这没有任何意义。这是我想要完成的：jsfiddle.net/dWUry/3 我添加了一个新菜单项，看起来与其他两个完全一样，但是 slideToggle 的功能丢失了。我希望保留这个功能，就像我在第一个小提琴中看到的那样。这可能吗？
我想我明白你的意思：幻灯片效果看起来不一致。如果想让幻灯片保持一致，隐藏时向上滑动，显示时向下滑动，可以查看：jsfiddle.net/JZ86W/2
弗兰克，够近了！我只需要弄清楚如何允许单独关闭每个项目。除了切换之外，您的解决方案从一个项目到另一个项目非常棒。非常感谢！

【解决方案3】：

基于 Moby 的回答小改进，以便您可以切换活动的一个，否则一旦打开就无法关闭它。

http://jsfiddle.net/jhYq5/2/

var menu;
$(document).ready(function () {
    $('.menuitem').hide();
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));

        $(".menuitem:not(#" + menu.attr("id") + ")").slideUp();
        menu.slideToggle();


    });
});

【讨论】：