折叠 DIV 隐藏其内容，即使以百分比定义也是如此

Question

我正在尝试获得一个 DIV，它可以在点击时折叠。对于这个simple example，整个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');
});

我的 example 显示了两种情况：第一种使用 "fixed" 宽度对象，而第二种使用 "percentage" 宽度。

单击时，首先 DIV 截断内容而不调整内容大小，导致隐藏溢出内容，但它需要基于像素的宽度，这不是很理想

相反，第二个根据容器的宽度调整内容，它允许我使用 %，但不会像我希望的那样在折叠时隐藏内容。

因此，我想像第二个示例一样以容器宽度的百分比设置内容宽度（也可能有 % 宽度），但在容器折叠的情况下具有第一个行为。

Answer 1

添加

#variable input { width:100%; min-width: 180px;}

到您的 css，因此它会保持百分比，但内容会在折叠时隐藏

Answer 2

使用切换功能在 display: block 和 display: none 之间切换似乎是最好的选择

Collapse a DIV hiding its content even if defined in percentage