1

これらのスクリプトを含むページに 4 つの 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と表示されます。スライダーを一度に 1 つだけ表示する方法があるかどうかは疑問です。

例： をクリックする#booksと、#books_toogle表示されます。ショーをクリックすると#menu、#menu_slide同時に#menu_slideショーが#books_toggle自動的にトグル/クローズします。したがって、一度に表示される隠し div は 1 つだけです。

4

2 に答える 2

0

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

とにかく、必要なのは1つだけです$(document).ready。これは、と書くだけで$(、'medium'すでにデフォルトのアニメーション速度になっています。

于 2013-02-03T21:12:26.990 に答える
0

CodeReview（私見）に投稿する必要がありますが、できることは次のとおりです。

$(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';
    });
});
于 2013-02-03T21:09:58.677 に答える