Question

结构：

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

加载文档后，我有一个js脚本，使用＆＃34; ParentCollapser＆＃34;查找所有元素。并将点击驱动的函数附加到它们，允许用户在单击时折叠父项（立即将高度设置为0）。

除了一些样式问题外，点击操作效果很好--FancyTitle定义如下：

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

所以基本上它在左侧/顶部/右侧以20px到达父容器外部。要隐藏内容，折叠时我必须设置#content overflow:hidden，但这也会隐藏到达外部并且看起来像便便的#contentTitle部分。

我是否可以为标题定义任何异常，因此无论如何都不会隐藏它？其他选择是进行结构改变，但我想尽可能避免这种情况，因为它现在非常容易使用。

Answer 1

您可以尝试使用适当的选择器摆弄否定CSS伪类not()。例如：

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

CSS negation pseudo class

请注意浏览器兼容性。

Answer 2

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

<强> 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;
};

<强> Demo

隐藏一些溢出内容

2 个答案: