9

jQueryはdisplay、simpleshow()とhide()functionsの内部でCSSプロパティを使用します。次のHTMLには、それぞれがタグでラップされた3つのボタンが含まれて<span>おり、3つのタグすべて<span>が親<div>コンテナに配置されています。ページの読み込み時に、<span>タグはjQueryを使用して非表示hide()になり、後でshow()関数を使用して表示されます。これで、HTMLは次の状態になり、<span>タグはスタイル値を受け取りましたdisplay: block;。

<div style="text-align:right; width:100%;">
    <span style="display:block">
        <input type="button" value="Button1" />
    </span>
    <span style="display:block">
        <input type="button" value="Button2" />
    </span>
    <span style="display:block">
        <input type="button" value="Button3" />
    </span>
</div>

Firefox（3.5）では、スパン要素は互いに垂直に積み重ねられて表示されますが、IEではインラインで表示されます。スパンタグのデフォルトのレイアウトはインラインであると思ったので、両方のブラウザで後者を期待していました。

手動でスタイルをからに変更するdisplay:blockとdisplay: inline;、Firefoxでは正しく表示されます。基本的に、要素を表示するとき、jQueryはdisplay常に有効であるとは限らない値を使用しています。追加display: block; 要素を表示するには十分ですが、必要なインラインレイアウトで表示するには十分ではありません。

だから、私の質問に：

  1. これはjQueryの既知の問題ですか？jQuery1.2.6を使用しています。
  2. 誰かが以前にこの問題を経験したことがありますか、そしてどのようにそれを回避しましたか？
4

4 に答える 4

9

display最初は、以外の値が必要な場合、表示/非表示機能を使用することはできないという回答がありましたblock。

しかし、<span>タグが非表示の状態のときに、jQuery が各タグに呼び出される属性を追加していたことに気付きoldBlockました。displayその後、これは要素が非表示のときに CSS 値を一時的に保存するためのものであり、要素が再び表示されたときに適切な値を元に戻すことができることに気付きました。

したがって、要素を非表示にする前に、表示に適切な値を設定するだけです。

初期状態：

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

呼び出す.hide()と、次の状態になります。

<div style="text-align:right; width:100%;">
    <span style="display:none" oldBlock="inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

を呼び出すshow()と、次の状態に戻ります。

<div style="text-align:right; width:100%;">
    <span style="display:inline">
        <input type="button" value="Button1" />
    </span>
    ...
</div>

主な問題は、初期状態で<span>要素に値を与えていなかったことです。displayしたがって、暗黙のうちにブラウザーのデフォルトを受け取りますが、これはinline私の予想どおりのようです。ただし、関数を呼び出す前oldBlockに値を明示的に設定した場合、jQuery は属性のみを使用します。属性がない場合、関数はデフォルト値の を使用します。display hide()oldBlockshow()block

于 2009-11-16T13:50:53.650 に答える
3

show / hiddenを使用する代わりに、addClass / removeClassを使用し、適用したいスタイルをクラスを使用して設定します。

.hidden
{
    display: none;
}

.inline
{
    display: inline;
}

.block
{
    display: block;
}

使用例：

$('.menuitem').hover(
      function() {
           $(this).parent()
                  .find('span')
                  .removeClass('inline block')
                  .addClass('hidden');
           $(this).addClass('inline');
      },
      function() {
           $(this).addClass('inline');
      }
});
于 2009-11-16T13:07:19.633 に答える
3

この問題は発生していませんが、必要に応じて、次のように css プロパティを明示的に設定できます。

$(this).show('fast').css("display","inline");
于 2009-11-16T13:17:04.263 に答える
1

私はこの特定の問題を抱えていませんが、より多くの制御のために.toggleClass（）を使用してください

于 2009-11-16T13:08:09.847 に答える