jQuery与多个div的滑动切换

我试着与多个div进行滑动切换，但似乎无法使其工作

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

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

我几乎觉得代码应该与此类似：

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

---

非常感谢您的帮助。

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

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

基本上，您需要使所有内容都具有通用性，以便以公共基础处理它

首先，我将您的标记更改为如下内容，请注意数据属性：

<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>

这是一把小提琴：

---

我希望这有帮助，祝你的应用好运

基本上，你需要让每件事都变得通用，以共同的立场来处理它

首先，我将您的标记更改为如下内容，请注意数据属性：

<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>

这是一把小提琴：

---

我希望这有帮助，祝你的应用好运

根据Moby的回答，这是一个小小的改进，您可以切换活动的，否则一旦打开就无法关闭

---

根据Moby的回答，这是一个小小的改进，这样你们就可以切换到活动的，否则一旦打开就不能关闭

---

棒极了，但是当我添加第三个菜单项时，功能完全改变了。这不是我想要的，因为我希望保持相同的slideup/slidedown切换功能。棒极了，但是当我添加第三个菜单项时，功能完全改变了。这不是我想要的，因为我希望保持相同的slideup/slidedown切换功能。你能给我举个例子吗？@NateBradshaw，我的解决方案实际上与Moby的类似。所以我很好奇你对他的解决方案的评论。如果你在添加新菜单项时遵循相同的模式，那么它应该适用于我们的任何一种解决方案。弗兰克，请容忍我，因为我对这一点很陌生。我正在尽我最大的努力去理解正在发生的事情，但这毫无意义。以下是我试图实现的目标：我添加了一个新的菜单项，它看起来与其他两个完全相同，但slideToggle的功能丢失了。我希望保留这个功能，就像我的第一把小提琴一样。这可能吗？我想我知道你的意思：幻灯片效果看起来不一致。如果您想使幻灯片保持一致，以便它在隐藏时向上滑动，然后在显示时向下滑动，您可以检查以下内容：Frank，够近了！我只需要弄清楚如何允许每个项目单独切换。使用您的解决方案，从一个项目切换到另一个项目是非常棒的，除了切换。非常感谢！你能给我举个例子吗？@NateBradshaw，我的解决方案实际上与Moby的类似。所以我很好奇你对他的解决方案的评论。如果你在添加新菜单项时遵循相同的模式，那么它应该适用于我们的任何一种解决方案。弗兰克，请容忍我，因为我对这一点很陌生。我正在尽我最大的努力去理解正在发生的事情，但这毫无意义。以下是我试图实现的目标：我添加了一个新的菜单项，它看起来与其他两个完全相同，但slideToggle的功能丢失了。我希望保留这个功能，就像我的第一把小提琴一样。这可能吗？我想我知道你的意思：幻灯片效果看起来不一致。如果您想使幻灯片保持一致，以便它在隐藏时向上滑动，然后在显示时向下滑动，您可以检查以下内容：Frank，够近了！我只需要弄清楚如何允许每个项目单独切换。使用您的解决方案，从一个项目切换到另一个项目是非常棒的，除了切换。非常感谢！

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);
        });
    });   
});

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

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


    });
});