折叠隐藏其内容的 DIV，即使以百分比定义答案

【问题标题】：Collapse a DIV hiding its content even if defined in percentage折叠隐藏其内容的 DIV，即使以百分比定义
【发布时间】：2015-03-20 01:28:20
【问题描述】：

我正在尝试获取可能会在点击时折叠的 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 显示了两种情况：第一种使用“固定”宽度对象，而第二种使用“百分比”宽度。

单击时，第一个 DIV 会在不调整其内容大小的情况下截断，从而导致隐藏溢出内容，但它需要具有不那么理想的基于 px 的宽度

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

所以，我想设置内容宽度为容器宽度的 %（也可以有 % 宽度），就像在第二个示例中一样，但是在容器折叠的情况下使用第一个的行为。

【问题讨论】：

【解决方案1】：

添加

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

到你的CSS，所以它会保持百分比，但内容会在折叠时隐藏

【讨论】：

对不起，这不是我想要的行为。我想设置与我的第二个示例完全相同的内容。这样，即使我改变了红色容器的宽度，也会相应地改变宽度。当我单击 DIV 折叠它时，会发生特殊情况。在这种情况下，行为应该与第一个示例非常相似，其中内容将不再适应其容器，而只是被隐藏。
不明白。也许像这样jsfiddle.net/9sht0ttm/2？（我根据需要更新了第二个示例，它以百分比为单位，但以 px 为单位设置了最小宽度，以便在折叠时隐藏。
哦，是的......非常接近解决方案......如果您将旅游评论转换为答案，我会接受它:-)

【解决方案2】：

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

【讨论】：