0

jqTransform プラグインを使用して、フォームのルック アンド フィールを強化しています。そして、ページ内のイベント(ボタンクリック)で、divを表示しようとしています。しかし、jQtrasformで作成されたdivの幅が0ピクセルになっているようです。

私のHTML

<div id="divUserInfo" style="display:none;">
  <input type="text" id="txtName" />
</div>

そして私のjavascriptでは、divを表示しています

function ButtonClicked()
{
 $("#divUserInfo").fadeIn(100);
}

display:none を display:block に変更すると、jQTrasnform で動作しますが、ページの読み込み時に div を非表示にして、ButtonClicked() 関数が呼び出されたときにのみ表示したいと考えています。

グーグルで調べた後、divが非表示の場合、プラグインは要素の幅を0にすることがわかりました。

何かご意見は ？

4

7 に答える 7

2

私はまったく同じ問題を抱えていましたが、いくつか掘り下げた後、次のように解決することができました：

  1. display: none;使用する代わりにvisibility:collapse;
  2. 自動に変換する要素の幅を設定しますwidth: auto !important;
于 2012-05-24T09:11:58.377 に答える
0

CSSで#divUserIdを明示的に定義しましたか？

#divUserId{ width:300px;display:none;}
于 2010-10-22T20:25:32.533 に答える
0

私のシナリオでは、検索ページで作業していました。フォームの読み込み中に検索パラメーターの数が少ない検索ボックスがあり、ユーザーは高度な検索ボタンをクリックして検索を具体的にすることができます。これにより、高度な検索$.slideToggle()を含む非表示の div が表示されますパラメーター。私が直面した問題は、ブロックに設定する前に高度なパラメーターを非表示にするために使用しjqTransformたスタイルシートプロパティを使用して非表示になっている場合、変換するフォーム要素の高さと幅を 設定することでした。のコールバック関数を使用して変換された要素display:nonediv$.slideToggle()$.slideToggle()

 $("#advancedSearchDIV").slideToggle("slow", function(){
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").each(
        function() {
        $(this).width(246);
        var height = 24;
        if($(this).children().length >= 6){
            height = 5 * height;
        } else {
            height = ($(this).children().length - 1) * height;
        }
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").height(height);
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").css("overflow","auto");
    });
});
于 2012-08-07T14:06:19.953 に答える
0

含まれている要素の幅が間違っているように見えたので、今日jqTransformのソースコードを見ていました。入力フィールドの「サイズ」属性も調べているようです。

だからあなたは試すことができます：

<div id="divUserInfo" style="display:none;">
  <input size="30" type="text" id="txtName" />
</div>

プラグインのソースでは、サイズに 10 を掛けてから 10px を追加してから、サファリ用に別の奇妙なことを行っていることに注意してください。少しいじる必要があるかもしれません。

それがあなたのためにそれをすることを願っています:D

于 2010-11-08T03:27:06.907 に答える
0

私は同じ問題を抱えていて、「可視性」で解決しました。それは100パーセントの作品です...

$(".c-ekleyin").click(function(){
$(".sel-boxrow2").css("visibility" , "inherit");
$(".c-ekleson").show();
$(".c-ekleyin").hide();
});

<div class="sel-boxrow2" style="visibility:hidden;">
         <select name="select2" style="width:42px;">
             <option value="">---</option>
             <option value="opt1">1</option>
         </select>

于 2013-03-06T07:46:10.430 に答える
0

これを試して：

 <div id="divUserInfo" style="width:300px;display:none;">
     <input size="30" type="text" id="txtName" />
 </div>

また 

 <div id="divUserInfo" style="display:none;">
    <input size="30" type="text" id="txtName" style="width:300px;" />
 </div>
于 2012-03-12T07:18:27.270 に答える
0

私は同じ問題を抱えていましたが、これが私がそれを解決した方法です。

代わりdisplay:noneに CSS で使用して、使用しているフォームを非表示にしheight:0;overflow:hiddenます。

animate次に、私が代わりに使用しているjsでslideToggle、フォームを表示するために以前に使用していました。私の場合、コードは次のようになります。

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

注: #showAdvacedは詳細オプションを表示するボタン#sfBlock03の ID であり、詳細フォームを含む div の ID です。

これが役立つことを願っています。

于 2011-12-23T16:19:33.923 に答える