3

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

当我的父 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（类“冰球”）。对于这段代码，我只使用了一个文本框，但想法相同。

当我缩小那个 div 时，包含的 div 会粘在一起并且非常乱码。

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

此外，如果在那之后它变得局促，我想删除右边的 div，只留下左边。

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

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

有任何想法吗？

4

1 回答 1

2

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);
于 2013-06-25T22:42:14.477 回答