javascript - jQuery - 许多切换 slider ，一次只有一个可见

Question

我在一个页面中有四个 jquery slider ，其中包含这些脚本:

$(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 可见。我很想知道是否有任何方法可以使 slider 一次只显示一个。

示例:当点击#books时，会显示#books_toogle。现在，当点击 #menu 时，会显示 #menu_slide，同时 #menu_slide 显示 #books_toggle Toogle/关闭自动。因此一次只会显示一个隐藏的 div。

Answer 1

查看您的 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'已经是默认的动画速度。