Question

我正在尝试使用jqueryUI滑块在我正在制作的网络应用上编写放大/缩小功能。

当我的父div缩小太多时，我很难处理，并使其子容器痉挛。

   <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/

基本上我有使用jquery滑块缩小的父div（类'puck'）。对于这段代码，我只使用了一个文本框，但同样的想法。

当我缩小div时，包含的div会一直存在并且非常乱码。

我希望能够在中间儿童div变得狭窄时移除它，让左右儿童div占据所有空间

此外，如果在此之后变得狭窄，我想删除正确的div，只留下左边。

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

有没有办法轻松地做到这一点，最好是通过CSS？我不想写更多的javascript代码来在每个子div上设置'display：none'，因为看起来有些CSS规则应该处理这个问题。

有什么想法吗？

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);

隐藏子<div> s，因为父div收缩？</div>

1 个答案: