0

私は次のHTMLを持っています：

<section id="sidebar" class="grid_3">
<section id="content" class="grid_9">

jQueryを使用してこれを次のように変更しました。

<section id="sidebar" class="" style="width: 0px;">
<section id="content" class="grid_12">

ただし、サイドバーのIDを持つセクションにはまだ幅があり、その中の要素が表示されているようです。

jQueryを使用してid=sidebarのコンテンツを表示しないようにする方法はありますか？幅を0pxにするとうまくいくと思いましたが、うまくいかないようです。表示を非表示または表示に設定することについて疑問に思っていましたが、非表示と表示の違いがわかりませんか？また、jQueryの表示と非表示についてもわかりません。この場合、どちらが最適ですか？

4

4 に答える 4

2 
$("#sidebar").hide() // sets the position of the element to `display: none`;
$("#sidebar").show() // sets the position of the element to `display: block`;
$("#sidebar").css('width', '0 !important') // sets the width of the element to `0` and overrides other element's width properties;
$("#sidebar").css('visibility', 'hidden') // The element is invisible but still takes up space;

how can I detect if the display is set to "none" with jQuery?

これを試して：

if ($('.grid_3').is(':hidden')) { // if the element is hidden do something here}
if ($('.grid_3').is(':visible')) { // if the element is visible do something here}
于 2012-07-01T06:38:35.113 に答える
1

visibility: hidden要素を非表示にしますが、ドキュメントフローには残ります。display: none要素を非表示にして、通常のフローから削除します。opacity: 0他の場合に使用できます。position: absolute状況によっては、要素を片側にシフトして非表示にする別のオプションがありますleft: -9999px。これらのオプションの1つを選択width: 0してください。少なくとも私の経験では、どのシナリオにも当てはまりません。

于 2012-07-01T06:36:14.703 に答える
0

$('#sidebar').hide()はサイドバーを非表示にしますが、（@ elclanrsが説明しているように）これによりドキュメントフローからその要素が削除されることに注意する必要があります。したがって、レイアウトを機能させるためにサイドバーの存在が必要な場合は、を使用してください$('#sidebar').css('visibility', 'none')。

于 2012-07-01T06:41:00.690 に答える
0

他の指摘したように：

  • visibility: hidden;：要素とそのコンテンツを非表示にしますが、スペースを取り続けます（設定と同じようにopacity: 0;）。
  • display: none;：オブジェクトを非表示にしてフローから削除し、他の要素のためにスペースを解放します（たとえば、これを上の要素に設定すると、下の要素が上に移動してそのスペースを占有します）。

overflow幅がゼロの要素を設定してコンテンツを非表示にするには、プロパティを次のように設定する必要があります。hidden

  • overflow: hidden：オーバーフローしたコンテンツを非表示にし（親の境界を超えて拡張）、親の外に表示されないようにします。

jQueryを使用animate()して、タスクを作成するために使用することをお勧めします。

$("#sidebar").css("overflow", "hidden").animate({ width: "hide" }, "fast");

ここでは、幅パラメータとして「toggle」または「show」を使用できます。

于 2012-07-01T07:02:54.140 に答える