我正在尝试在我使用 jqueryUI slider 制作的 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 slider 缩小的父 div(类“puck”)。对于这段代码,我只使用了一个文本框,但想法相同。
当我缩小那个 div 时,包含的 div 会留下来并且非常乱码。
我希望能够在变得狭窄时删除中间的子 div,让左右子 div 占据所有空间
此外,如果在那之后变得狭窄,我想删除右边的 div,只留下左边。
最后,我希望能够删除所有内容,以便只显示父级的背景。
有没有办法轻松做到这一点,最好是通过 CSS?我不想编写更多的 javascript 代码来在每个子 div 上设置“display:none”,因为一些 CSS 规则似乎应该处理这个问题。
有什么想法吗?
最佳答案
CSS 中并没有真正的逻辑来处理这样的事情。您可以根据视口(viewport)大小设置规则,但这在这种情况下无济于事。
我更新了你的 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);
关于javascript - 在父 div 缩小时隐藏子 <div>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17308673/