javascript - jQuery - 许多切换滑块，当时只有一个可见

Question

我在一个页面中有四个 jquery 滑块，其中包含以下脚本：

$(document).ready(function(){
  $("#information").click(function(){
    $("#information_show").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#menu").click(function(){
    $("#menu_slide").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#books").click(function(){
    $("#books_toggle").slideToggle("medium");
  });
});

$(document).ready(function(){
  $("#content").click(function(){
    $("#content_div").slideToggle("medium");
  });
});

因此，例如，当我单击 div 时#information，它#information_toggle是可见的。如果有任何方法可以使滑块一次只显示一个，我会很高兴。

示例：当点击 时#books，#books_toogle显示。现在当点击节目时#menu，#menu_slide同时#menu_slide节目#books_toggle自动切换/关闭。所以一次只会显示一个隐藏的 div。

Answer 1

虽然它应该发布在 CodeReview(imho) 上，但你可以这样做：

$(document).ready(function () {
    var last, last2;
    $("#information").click(function () {
        $("#information_show").slideToggle("medium");
        if (last != '#information_show' && last != last2) $(last).slideToggle("medium");
        last2 = last;
        last = '#information_show';
    });
    $("#menu").click(function () {
        $("#menu_slide").slideToggle("medium");
        if (last != '#menu_slide' && last != last2) $(last).slideToggle("medium");
        last2 = last;
        last = '#menu_slide';
    });
    $("#books").click(function () {
        $("#books_toggle").slideToggle("medium");
        if (last != '#books_toggle' && last != last2) $(last).slideToggle("medium");
        last2 = last;
        last = '#books_toggle';
    });
    $("#content").click(function () {
        $("#content_div").slideToggle("medium");
        if (last != '#content_div' && last != last2) $(last).slideToggle("medium");
        last2 = last;
        last = '#content_div';
    });
});

Answer 2

查看您的 html 会有所帮助，但很容易以一种丑陋的方式做到这一点：

$("#information").click(function(){
    $("#information_show").slideToggle();
    $("menu_slide, books_toggle, content_div").slideUp();
});

然而，一个更漂亮的方法是使用类：

$(".slider").on('click', function () {
    var $assocDiv = $(".slider_show").eq($(this).index));
    $assocDiv.slideToggle();
    $(".slider_show").not($assocDiv).slideUp();      
});

无论如何，你只需要一个$(document).ready，它可以写成$(，并且'medium'已经是默认的动画速度。