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 toogle /关闭自动。因此，一次只能显示一个隐藏的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'已经是默认的动画速度。

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

2 个答案: