[英]Hide child <div>s as parent div shrinks?
我正在尝试使用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(类'puck')。 对于这段代码,我只使用了一个文本框,但同样的想法。
当我缩小div时,包含的div会粘在一起并且非常乱码。
我希望能够移除中间的孩子div,当它变得狭窄,留下左右儿童div占据所有的空间
此外,如果它在那之后变得狭窄,我想删除正确的div,只留下左边。
最后,我希望能够删除所有内容,以便只显示父级的背景。
有没有办法轻松地做到这一点,最好是通过CSS? 我不想写更多的javascript代码来在每个子div上设置'display:none',因为看起来有些CSS规则应该处理这个问题。
有任何想法吗?
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.