如果父div的宽度低于某个值，则隐藏div

Question

如果container div的宽度低于某个值，如何隐藏div（或对应于某个类的元素）？

上下文是动态的，因为父div可通过jQuery UI resizable（）调整大小。如果有必要隐藏子div，当父div被调整大小时。

Answer 1

目前标准的CSS，CSS3中没有css parent选择器。为此，您正在处理行为，所以最好使用JavaScript或jQuery。

举个例子吧。假设你有两个div

<div id="parent"> 
    <div id="child">This is a child</div> 
</div> 

你的JavaScript文件应该是这样的

var child = document.getElementById("child"); 
var parent = document.getElementById("parent"); 

parent.addEventListener("resize", function() { 
    if (parent.width < 500) { 
     child.style.display = "none"; 
    } 
    else { 
     child.style.display = "block"; 
    } 
}); 

在jQuery中，这可以像这样

$(document).ready(function() { 
    $("#parent").on("resize", function() { 
     $("this").width() < 500 ? $("#child").hide() : $("#child").show(); 
    }); 
}); 

注意，jQuery的width()方法没有按”完成包括填充，边框或边距。

在这两种情况下，我们正在侦听resize事件，这是在元素大小发生变化时发生的。每次它都会运行一次检查来确定父级的宽度是否小于某个阈值。如果是，则子元素将被隐藏。否则，它会显示。