1

我正在尝试使用多个 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)
});

任何帮助表示赞赏。

4

3 回答 3

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/

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

于 2013-08-08T22:43:31.470 回答
0

Based on Moby's answer small improvement so that you can toggle active one , otherwise you cant close it once it is open.

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


    });
});
于 2014-01-05T14:00:33.957 回答
0

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

于 2013-08-08T22:37:07.507 回答