当父级<div>缩小时如何隐藏子<div>？

Question

我正在制作一个使用jqueryUI滑块的Web应用程序，并尝试编写一个缩放功能。

但当我的父容器缩小太多并挤压其子容器时，我很难处理该情况。

   <div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
    <div class="conflicted inline-block originator">
        <div class="right-number">I should stay</div>
        <div class="left-number">I should stay</div>
        <div class="middle-number">I Should disapper</div>
    </div>
</div>

这里是我所拥有的相关代码部分http://jsfiddle.net/aQKwE/。

基本上，我有一个父级div（类名为'puck'），它正在使用jquery滑块进行缩小。对于此代码，我只是使用了一个文本框，但是相同的想法。

当我缩小那个div时，包含的div会保持不变，非常混乱。

我希望能够在中间子div变得过于拥挤时将其删除，使左侧和右侧子div占据所有空间

此外，如果之后还变得过于拥挤，我希望删除右侧div，仅留下左侧div。

最后，我希望能够删除所有内容，以便只显示父级的背景。

是否有一种简单的方法来实现这一点，最好通过CSS？我不想编写更多的javascript代码来设置每个子div的'display:none'，因为似乎某些CSS规则应该处理这个问题。

有什么想法吗？

- 75inchpianist

---

你不能在缩放时调整字体大小吗？ - PSL

css的overflow: hidden;应该可以解决问题，如果你不想一个一个地隐藏元素并且不使用JavaScript。 - stackErr

这里有一个例子 jsFiddle，使用类似于 @MochDaear 的逻辑，但使用 resize() 事件作为触发器。 - George Cummins

然而，我对这个解决方案的问题是，我的应用程序中有接近100-200个这样的“pucks”，并且所有这些都被调整大小，因此我担心在这么多的元素上执行这个逻辑会影响性能，特别是因为IE的JavaScript引擎非常糟糕。 - 75inchpianist

Answer 1

CSS并没有内置处理这种情况的逻辑。您可以根据视口大小设置规则，但在这种情况下无济于事。

我已经使用以下代码更新了您的jsfiddle，以便您测试并查看结果，但基本上我只是在您的javascript函数中添加了一些检查来根据提交的宽度进行隐藏。

    var newwidth = $('#text').val();
    $(".middle-number").show();   
    $(".right-number").show();  
    if (newwidth < 280) {
         $(".middle-number").hide();   
    }
    if (newwidth < 180) {
         $(".right-number").hide();   
    }
    $('.puck').css('width',newwidth);

- Arth Du