Question

如果它的一部分为空，有没有办法隐藏整个div？例如，如果“dd”为空，如下所示，我可以隐藏整个类“test”，因此关键字Restrictions也不显示。我试过.test dd：empty {display：none;但这不起作用。谢谢！

  <div class="test"><dt>Restrictions:</dt>
  <dd></dd></div>

Answer 1

您可以将CSS更新为

.test{ 
display: none; 
color: transparent;
}

这会使文本透明，但显示：无论如何都应该隐藏它。

要使id测试的div仅在dd标记为EMPTY时显示，并且您可以使用jQuery，请尝试使用以下JavaScript和CSS：

if($("dd").html().length ==0)
{show();
}

注意：此解决方案需要jQuery，这是一个JavaScript库。

Answer 2

单靠CSS无法做到这一点。要么，你需要一个javascript来检索空元素并隐藏他们的父母，或者你的CMS应用特殊的CSS类，如果没有内容的话。

根据@Barett的要求提供答案。

Answer 3

我认为没有任何简单的方法可以用CSS来解决你所说的问题。如果可以，最好在服务器端进行测试。但是如果你不能在这里做一些可以完成这项工作的JS。

<script type="text/javascript">
// handles multiple dt/dd pairs per div and hides them each conditionally
function hideIfEmpty() {

    // get all the elements with class test
    var els = document.getElementsByTagName('dl');
    // for every 'test' div we find, go through and hide the appropriate elements
    Array.prototype.map.call(els, function(el) {
        var children = el.childNodes;
        var ddEmpty = false;
        for(var i = children.length - 1; i >= 0; i--) {
            if(children[i].tagName === 'DD' && !children[i].innerHTML.trim()) {
                ddEmpty = true;
            } else if(children[i].tagName === 'DT') {
                if(ddEmpty) {
                    children[i].style.display = 'none';
                }
                // reset the flag
                ddEmpty = false;
            }
        }
    });

}

window.addEventListener('load', hideIfEmpty);
</script>

<div class="test">
    <div style="clear: both;"></div>
    <dl>
        <dt>Restrictions:</dt>
        <dd></dd>
        <dt>Other Restrictions:</dt>
        <dd>Since I have content, I won't be hidden.</dd>
    </dl>
</div>

只是一个公平的警告：代码使用旧IE中可能不存在的一些功能，例如Array.prototype.map，String.prototype.trim和addEventListener。有可用于这些的填充物，您也可以很容易地编写自己的填充物（或者只是使用for循环）。

使用CSS隐藏整个div，其中一部分为空

3 个答案: