3

これがお尻の痛みである場合は申し訳ありませんが、ここでいくつかの助けを借りることができます:

http://dev.rjlacount.com/treinaAronson-form/

お問い合わせフォームは、左上の「お問い合わせ」ボタンからご覧いただけます。jqTransform jQuery プラグインを使用してスタイルを設定しています。最初は display:none; で非表示になっています。ID "panel" の div に適用され、次のように挿入されます。

$("#flip").click(function(e){
    e.preventDefault();
    $("#panel").slideToggle("3000");
});

この設定では、コンタクト フォームはフィールド内の選択ボックスの現在の値を表示しません。代わりにディスプレイを削除すると:none; CSS からパネル div のルールを作成し、ページが読み込まれた後にフォームを非表示にします。

$("#panel").hide();

フォームが正しく表示されます。ページの読み込み後にjQueryで非表示にした場合に、これを機能させ、開いているパネルのフラッシュを回避する方法を知っている人はいますか?

アドバイスをありがとうございました。さらに情報を提供できる場合はお知らせください。

4

1 に答える 1

1

問題は、jqtransform が元の選択の幅と一致するようにラベル (変換された選択で現在表示されている値) の幅を設定していることです。

元の選択 (またはその親) がdisplay:none設定されていて、CSS 幅が指定されていない場合、.width()その要素の結果はゼロになります。

実際に (firebug または google chrome dev tools を使用して) 確認できますが、連絡先フォームが select 要素の現在の値を表示しているのではなく、幅がゼロで表示されていることを確認できます。

あなたの場合の最も簡単な解決策は、連絡先フォームの一部である選択に対して（cssファイルで）固定幅を設定することです。そうすれば、最初は非表示になりますが、jqtransform はラベルの正しい幅を設定します。例えば：

/* css declaration */
#change-form select {
    width: 390px;
}

補足: もちろん、特定のユースケースに合わせて jqtransform スクリプトを微調整するなど、他の方法で機能させることもできます。前述のラベル幅の設定に関連するスクリプトの一部は、289 行目から始まります。

于 2011-10-05T07:32:27.050 に答える