0

私はいくつかのリンクを持っています、それはこのようにそれらの対応するdivを切り替える必要があります...

    $('#link a').click(function() {
        $('#open').animate({width: 'toggle'});
      });

    $('#link2 a').click(function() {
        $('#open2').animate({width: 'toggle'});
      });

    $('#link3 a').click(function() {
        $('#open3').animate({width: 'toggle'});
      });

問題は、＃linkをクリックしてから＃link2をクリックすると、両方のボックスが開いたままになることです。

すべての「#open」divは同じクラスを共有するため、

$('#link1 a').click(function() {
        $('shared-class').hide();
        $('#open1').animate({width: 'toggle'});
      });

これは機能しますが、非表示がスライドしないので非常に粗雑に見えます。クラスでトグルを使用すると、出てくるものとシャインするものの順序が混同されます。方法があるかどうかはわかりません。 IF IT IS OUTで要素をスライドさせるには、これが理にかなっていることを願っています。

編集

http://jsfiddle.net/PEfHc/

基本的に、1をクリックすると、他のすべては表示されないはずです

4

2 に答える 2

1

この種のことを行うためのより簡単な方法は確かにありますが、とにかく：

$('a', '[id^="link"]').click(function(e) {
    e.preventDefault();
    var elm = $('#open'+$(e.target).parent().attr('id').replace('link', ''));
    $('[id^="open"]').not(elm).filter(':visible').animate({width: 'toggle'}, 1000);
    elm.animate({width: 'toggle'}, 1000);
});​

フィドル

于 2012-05-03T10:15:51.410 に答える
1

あなたはこのようなことをすることができます：

$('#link1 a').click(function(e) {
    e.preventDefault();
    $('.shared-class:visible').animate({width: 'toggle'});
    $('#open1').animate({width: 'toggle'});
});

このフィドルのように

とにかく、これは因数分解する必要があります、それはデモンストレーションの目的のためだけです。

于 2012-05-03T12:00:46.477 に答える