只隐藏一些溢出内容

Hiding just some overflow content

本文关键字：溢出 隐藏      更新时间：2023-09-26

结构：

<div id="content">
    <div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
    <br />
    some text
</div>

文档加载后，我有一个js脚本，它用"ParentCollapser"查找所有元素，并将单击驱动的函数附加到这些元素上，允许用户在单击时折叠父元素（现在将高度设置为0）。

除了一些样式问题之外，点击操作非常有效。FancyTitle的定义如下：

.FancyTitle{
    margin-left:-40px;
    margin-right:-40px;
    margin-top:-20px;
    margin-bottom:10px;
}

因此，基本上，它在左/上/右方向达到父容器外20像素。为了隐藏内容，当折叠时，我必须设置#content overflow:hidden，但这也隐藏了#contentTitle的外部部分，看起来像大便。

有没有什么例外我可以为标题定义，这样它无论如何都不会被隐藏？另一种选择是进行结构更改，但如果可能的话，我想避免这样做，因为现在它非常容易使用。

您可以尝试使用适当的选择器来处理否定CSS伪类not()。示例：

#content:not(#contentTitle) {
    overflow:hidden;
}

CSS否定伪类

只需注意浏览器兼容性。

因为标题应该一直显示，所以不知道隐藏它的父级。因此，我在.中添加了一个包含内容的孩子

HTML

<div style="padding:100px;background:gray">
   <div id="content" style="background:blue">
       <div id="contentTitle" class="ParentCollapser FancyTitle">title</div>
       <div class="contentChild">some text</div>
   </div>
</div>

现在我们用js 隐藏contentChild

JavaScript

this.Collapse = function() {
    this.parent.querySelector("div.contentChild").style.display = "none";
    this.collapsed = true;
};
this.UnCollapse = function() {
    this.parent.querySelector("div.contentChild").style.display = "block";
    this.collapsed = false;
};

演示

相关文章：