0

hide\show スポイラーを開いてから別のスポイラーを開くと、ページが非常に長くなる方法を知っていますか?

解決策は、クラスが表示されているかどうかを js に確認させ、表示されている場合はスポイラーを閉じることです。

しかし、これを行う方法がわかりません。これは、使用しているjsコードです：

$(document).ready(function(){


    $(".hide1").hide();
    $(".spoiler1").show();

    $('.spoiler1').click(function(){
    $(".hide1").slideToggle();
    });

});

hide1 = クリックで開くコンテンツ。 spoiler1 = トグル ボタン。

Spoiler2、3、4 は残りのスポイラーなので、hide2、3、4 は残りのコンテンツです。

これはライブサイトです：

http://justxp.plutohost.net/slyfiles/index.html

例：

ちなみに、最初のボックスをクリックすると、これはボックス領域です。

http://gyazo.com/5df95ee77b95dfd932eab781955f98f3.png?1349209216

わかりました、開いてから2番目のボックスをクリックしてください..そして、コンテンツは開きますが、最初のボックスは閉じていません。

新しいボックスを開いた後、最初のボックスを閉じるようにしたい。すべてのボックスでこのように動作します。

どうすればいいですか？

ところで、ひどい文法でごめんなさい。

ありがとう！

4

3 に答える 3

1

カスタムプロパティを介して、それぞれspoilerを対応するものにリンクする必要があります。hide

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div>
<div id="hide1" class="hide">Hide 1</div>
<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div>
<div id="hide2" class="hide">Hide 2</div>
<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div>
<div id="hide3" class="hide">Hide 3</div>
<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div>
<div id="hide4" class="hide">Hide 4</div>​

動作は次のようになります。

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});​

作業フィドルを参照してください: http://jsfiddle.net/adrianonantua/dyUwH/

于 2012-10-02T20:47:57.157 に答える
0

表示と非表示を行っているので、これを行うだけです

$('.spoiler').click(function(){

    // if the current is not open then hide opened
    if( !($(this).is(':visible')) ) {
        $('.spoiler:visible').hide();
    }
    // open new one, you know the code here
});

これを行うにはいくつかの方法があります。コンテンツを開いたり非表示にしたりするクラスを簡単に追加できます。開いているアイテムを開くクラスを追加すると、開いているクラスを簡単にターゲットにして削除して閉じることができます。

$('.spoiler').click(function(){

    // if the current is not open then hide opened
    if( !($(this).hasClass('open')) ) {
        $('.spoiler').removeClass('open');
        $(this).addClass('open');
    } else {
        // remove open if you want to close it
    }

});

スポイラーは通常通り閉じられ、クラスは開いており、ディスプレイブロックなどがあります。もちろん、これはアニメーション化されません。アニメーションが必要な場合は、目に見える方法を使用できます。

私が言いたいことの1つは、コーディングに大いに役立ちました。クラスを追加すると、よりクリーンになり、cssを使用して非表示と表示を制御できます。開いているアイテムを削除したい場合は、あなたが言う特定の開いているものをターゲットにする必要はありません

$('.spoiler').removeClass('open')

したがって、開かれたクラスがある場合はopenを削除します。特に、ターゲットにする必要はありません。もちろん、開いているものだけをターゲットにしたい場合は、

$('.spoiler.open').removeClass('open')

アップデート

ここでフィドルを参照してくださいhttp://jsfiddle.net/YE2bY/

于 2012-10-02T20:49:38.840 に答える
0

これを解決する最も簡単な方法は、クラスが「hide」で始まるすべての div を非表示にすることです。次のコード行を onclick ハンドラーに追加します。セレクターは、「hide」で始まるクラスを持つすべての div を見つけて非表示にします。次に、必要なものを表示します。

$('div[class^="hide"]').hide();

このセレクターの jquery api doc は次のとおりです。http://api.jquery.com/attribute-starts-with-selector/

于 2012-10-02T20:47:28.700 に答える