Question

如果容器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事件，该事件发生在元素大小发生变化时。每次执行时，都会运行检查以确定父级的宽度是否小于某个阈值。如果是，则隐藏子元素。否则，它将显示。

如果父div的宽度低于某个值

1 个答案: