jquery - 新しいトグルのjQueryのトグル解除メニュー

Question

私はこのフィドルを持っています: http://jsfiddle.net/9J5Fg/

1 つのボックスが開いていて、もう 1 つのボックスをクリックすると、ボックスを開いて閉じると、別のボックスが開きます。

どうもありがとうございました！

Answer 1

これを試してくださいhttp://jsfiddle.net/9J5Fg/2/

または、きれいできれいな css3 バージョンhttp://jsfiddle.net/9J5Fg/3/

Answer 2

これを処理するシングルクリックイベントを作成できます..両方のdivにクラスを追加するだけで、正常に機能するはずです。

JS

$('#tb1 , #tb2').click(function() {
    $('#box-1, #box-2').stop().animate({"height": '0px'}, 400);

    if ( $('#' + this.className).height() == 0) {
        $('#' + this.className).stop().animate({ "height": '50px' }, 400);
   }
});

HTML

<div id="btns">
    <span id="tb1" class="box-1">Toggle box-1</span>
    <span id="tb2" class="box-2">Toggle box-2</span>
</div>

<ahref="http://jsfiddle.net/sushanth009/mZRRa/1/"rel="nofollow">デモを確認

Answer 3

まさにあなたが必要とするもの:)

まず、どのリンクがクリックされているか、このリンクが参照しているボックスを特定する必要があります。その後、高さを切り替えることができます。次に、他のものを閉じる必要があります。

$('#tb2, #tb1').click(function() {
    var id = this.id.substr(-1),
        $box = $('#box-' + id),
        height = $box.height();

    // toggle box height
    $box.stop().animate({"height": (height == 50 ? 0 : 50) + 'px'}, 400);
    // close other boxes
    $('#container div').not($box).stop().animate({"height": '0px'}, 400);
});

デモ

このデモを見ると、2 つ以上のボックスがある場合にこのコードが機能することがわかります。クリック セレクターを に変更するだけです$('#btns span')。

Answer 4

もう少し抽象化されています.. HTMLを変更したい場合は、さらに適切にコーディングできます

$('#btns span').on('click', function () {

    var btnId = $(this).attr('id'),
        $container = $('#box-' + btnId.substr(2)),
        open = $container.height() > 0;

    $('#container div').not($container).stop(true, true).animate({"height": '0px'}, 400);

    $container.stop(true, true).animate({"height": (open ? '0px' : '50px')}, 400);
})

</p>

http://jsfiddle.net/9J5Fg/5/