クリックすると折りたたむことができる DIV を取得しようとしています。この簡単な例では、クリックは DIV 全体で直接トリガーされます。
<div id='fixed'>
<input type='text'>
</div>
#fixed { width: 200px; }
#fixed input { width: 180px; }
.short_fixed { width: 50px !important; }
$('#fixed').click(function(){
$(this).toggleClass('short_fixed');
});
私の例は 2 つのケースを示しています。1 つ目は「固定」幅オブジェクトを使用し、2 つ目は「パーセンテージ」幅を使用します。
クリックすると、最初の DIV がコンテンツのサイズを変更せずに切り捨てられ、オーバーフロー コンテンツが非表示になりますが、あまり望ましくない px ベースの幅が必要です
代わりに、2 つ目はコンテナーの幅に応じてコンテンツを調整します。% を使用できますが、希望どおりに折りたたみ時にコンテンツを非表示にしません。
したがって、2 番目の例のように、コンテンツの幅をコンテナーの幅の % で設定したいと思います (% の幅もある可能性があります)。