Question

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

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

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

但我需要它才能使用3或4个div而不是2个。

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

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

感谢任何帮助。

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

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

Answer 2

我建议将你的图像div包装在一个容器中，并对你的信息div做同样的事情。要么使用相同的容器，要么使用两个独立的容器 - 由您决定。然后在单击图像div时使用，隐藏所有信息div，并仅显示相应的信息div，方法是使用相对于容器的div索引。您可以使用jQuery的index（）函数。它还简化了您的代码。

Answer 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();


    });
});

jQuery slideToggle有多个div

3 个答案: