2

私は2列の構造を持っています。使用されるCSSは次のとおりです。

.div-left
{
position: relative;
float: left;
width: 18%;
margin: 1;
}

.div-right
{
position: relative;
float: right;
width: 81%;
margin: 0;
}

ある意味で柔軟な構造が必要です。一方の列が折りたたまれると、もう一方の列が自動的にスペースを占有するはずです。

以下に示すように、最初の列を非表示にしようとしています。

$("#test").animate({width: 'toggle'});

これは私の最初の列を隠していますが、右の列は最初の列によって解放されたスペースを占めていません。

ここからJavaScriptを使用して切り替えました（http://www.learningjquery.com/2009/02/slide-elements-in-different-directions）。

これに関する助けをいただければ幸いです。

4

1 に答える 1

2

別の解決策：CSSトランジション（タグにCSS3をリストしているので言及しています）および.expanded/.collapsedクラスを使用します。次に、jQueryを使用してクラスを切り替えます。

デモ（列をクリックして展開/元の幅に戻す）

HTML：

<div class='left'></div>
<div class='right'></div>

CSS：

* { margin: 0; }
div { min-height: 10em; transition: linear 1s; }
.left {
  float: left;
  width: 18%;
  background: crimson;
}
.right {
  float: right;
  width: 81%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }

jQuery：

$('div').click(function(){
    $(this).toggleClass('expanded').siblings().toggleClass('collapsed');
});
于 2012-09-18T14:35:32.943 に答える