1

ボタンをクリックすると、対応するオプションとして div ボックスが表示されるメニューがあります。それはうまく機能しますが、私が理解できないように見える唯一のことは、ボックス内に配置したdivを次のように表示する代わりに表示できるようにする方法ですdisplay:hidden.

追加.css("display","block");してみましたが、少しおかしくなりました。私が現在座っている場所は次のとおりです: FIDDLE .

CSS または JS に何らかの変更が加えられた場合は、それを機能させるために何を変更したか教えていただけますか?

1 番目と 2 番目のボックスに div を追加して、それらが表示されていないことを示しました。

4

1 に答える 1

1

あなたが何を求めているのかを理解するのにしばらく時間がかかりました.あなたのcssはすべてを右に押し上げていますが、これはあなたが探しているものだと思いますか? http://jsfiddle.net/GbMRx/3/

$(function () {
    $('.button').on('click', function () {
        var el = $('#cnt' + this.id.replace('btn', ''));
        $('#content-new div').not(el).animate({
            height: "toggle",
            opacity: "toggle"
        }, 100).hide();
        el.toggle();
        el.children("div").toggle();
    });
});

私も子供たちを切り替えました。

別のオプション（おそらくより良いオプション）は、最初のレベルの子のみを非表示/トグルすることです... http://jsfiddle.net/GbMRx/4/

JS:

        $('#content-new > div').not(el).animate({...

CSS: (これを削除display:noneし#content-new divて追加)

#content-new>div {
    display:none;
}

...そして、私は考え始めました。おそらく、最初のレベルの子 div のみに影響を与えるつもりでしたか? #content-new divそれが本当なら、これはおそらくあなたが望むものです...すべてを...にすることを除いて上記と同じです#content-new>div... http://jsfiddle.net/GbMRx/5/

于 2013-04-09T13:03:41.237 に答える