1

ページ上の同じスペースを占める必要がある2つのDIVがあります。背面DIVにはいくつかのフォーム要素があり、ユーザーが背面DIVにアクセスするために前面DIVをスライドできるようにしています。

問題は、フロントDIVの下のコンテンツがバックDIVの上に移動していることです。どうすればこれを修正できますか？

これが私が今していることの例です。

http://jsfiddle.net/7DFfa/3/

ありがとうシェリダン

4

3 に答える 3

1

ラッパーの高さを設定する必要があります。

$("#wrapper").height($("#front").height());

#frontdivを「スライドアップ」すると、 divの#wrapper高さが失われます。

ここで動作することを確認してください：http：//jsfiddle.net/7DFfa/4/

また、フォーム要素にアクセスできるようにz-index、 divのを切り替える必要があります：http： //jsfiddle.net/7DFfa/5/#back

$("#opener").toggle(function() {
    $("#front").stop().slideToggle(function() {
        $("#back").css("z-index", "1");
    });

    $(this).text("Show Front");
    }, function() {

    $("#back").css("z-index", "-1");
    $("#front").stop().slideToggle();

    $(this).text("Show Back")
});​

または、両方のdivを切り替えることもできます：http：//jsfiddle.net/7DFfa/7/

$("#back").hide();
$("#wrapper, #back").height($("#front").height());

$("#opener").toggle(function() {
    $("#front").stop().slideToggle();
    $("#back").stop().slideToggle();
    $(this).text("Show Front");
    }, function() {
    $("#front").stop().slideToggle();
    $("#back").stop().slideToggle();
    $(this).text("Show Back")
});​
于 2012-09-25T21:06:28.723 に答える
0

ラッパーdivに高さを追加してみてください

<div id="wrapper" style="width:400px;height:140px;">

最初のdivはおかげで拡張され</br>ますが、2番目のdivには「拡張可能な」タグが含まれていないため、高さが低くなります。

于 2012-09-25T21:04:32.087 に答える
0

ラッパーdivに高さを追加することは1つのオプションです。もう1つは、ボタンの絶対位置を設定し、ラッパーの高さに等しい上部を追加することです。jsfiddle

于 2012-09-25T21:13:37.407 に答える