0

展開可能なセクションを含むフォームを作成しています。div は、jquery の hide() および show() メソッドを使用して切り替えられます。

Chrome と FF ではすべて正常に動作しますが、IE では、セクションが内部で開かれたときに、他のものを含むメイン div が収まるように拡張されません。

コンテナdivの高さの設定など、いろいろプロパティを変えてみましたが、

<div id='form'>

    <form id='form2'>
        // some form fields
        <div id="section1" style="display: none">
          // more fields
        </div>
        <div id="section2" style="display: none">
          // more fields
        </div>
    </form>

</div>

したがって、#section1 または #section2 で show() を呼び出すと、#form は展開されず、同じ高さのままであり、実際に展開および閉じられている div は正常に機能しているように見えます。背後に素敵なコンテナーがありません。彼ら。

更新 助けてくれてありがとう - 私は今、より多くの情報を提供しています.

ここに移動して問題のページを表示してください:フォームページ送信を押してください (フォームにいくつかのテストデータを入力しました)。次に、問題のある 2 番目のフォーム ページが表示されます。

2 つのセクションの緑色のアイコンは div を制御します。どちらも同じであるため、最初のセクションの jQuery スクリプトを次に示します。

var toggleMinus = 'wp-content/uploads/2010/01/delete.png';
var togglePlus = 'wp-content/uploads/2010/01/add.png';

$("#openelec").click(function() // when button clicked
{
    var toggleSrc = $(this).attr('src'); // check which icon is shown
    if(toggleSrc == toggleMinus) // if it is a minus
    {
        $(this).attr('src', togglePlus); // change to plus
        $(".elecsite").slideUp(1500); // close the div
    }
    else
    {
        $(this).attr('src', toggleMinus); // change to minus
        $(".elecsite").slideDown(1500); // open the div 
    };
});

Chrome または FF で表示すると、私がどのように動作させたいかがわかります。IE では、うまくいきません。

これもcssです：（メインのdivと展開するもののみ）

#form{
width: 770px;
background: #DDEEEE;
padding: 10px;
border-top: 1px solid #c60;
height: auto;
text-align: left;

-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.elecsite{
width: 760px;
height: auto;
background: #EFE0E0;
padding: 5px;
border-bottom: 1px solid #DF7401;
float: left;
}

それでは、気違いのプログラマーが私を助けてくれるか見てみましょう ;) 助けてくれてありがとう。

4

2 に答える 2

3

セクション 1 とセクション 2 はフローティングですか? その場合は、展開可能な div の後に clear:both を含む div を追加します。

于 2010-01-14T17:30:36.640 に答える
0

Worked it out! I knew as soon as I posted all that info it would just jump into my head!

The problem was that the container div I wanted to expand had it's corners curved using curvycorners - this meant that IE couldn't re-render it I guess, so I just took the rounding off and added another div below with the rounded corners.

Thanks to the people who helped.

于 2010-01-15T14:12:23.670 に答える