html - 根据父类有选择地隐藏子元素

Question

我有一个表，其中每个tr 都有很多元素。我正在实现“折叠”功能，以便可以最小化一行，仅显示几个基本元素。我想通过向要显示的元素添加 show-on-collapse 类来实现此目的，然后通过我的样式表隐藏其他所有内容。

我遇到的问题是，即使给定元素被显式声明为 display: block;，它也不会显示其父元素是否任何 显示:无；。

我可以通过在链中一直添加 show-on-collapse 来解决这个问题，但这并不是真正可行的，并且会给我的标记增加很多膨胀。

这是一个 JSFiddle，展示了我正在努力完成的事情以及我现在拥有的不令人满意的解决方法:http://jsfiddle.net/89XfC/

最相关的代码是此处的not选择器:

table {
  width: 100%;

  &.collapsed {
    td {
      &:not(.show-on-collapse) { display: none; }
            *.hide-on-collapse { display: none; }
    }
  }
}

我正在寻找的是 &.collapsed 下的东西，它使 only 具有 show-on-collapse 的元素成为当父元素获得 collapsed 类时可见。我该怎么办？

Answer 1

如果这些基本元素可以在您的单元格中处于任何深度级别，则没有简单的 CSS 解决方案。
如果单元格本身是这些基本 block ，即使在行折叠或它们的子级或孙级或...但不是所有这些的混合时也能显示，这将很简单。

因此您需要一个基本 block 的所有祖先的类，否则它不再显示。这是一个 fiddle :http://jsfiddle.net/89XfC/2/
td 元素显示为 table-cell 而不是 block；如果没有其他需要同时使用这两个类，则可以将使用的两个类优化为一个类。

HTML

<div class="container">
    <table class="table1">
        <tr>
            <td class="has-essential">
                <span class='is-essential'>Show me!</span>
            </td>
            <td>Hide me!</td>
            <td class='is-essential'>Show me too!</td>
            <td class="has-essential">
                <ul class="has-essential">
                    <li>One</li>
                    <li>Two</li>
                    <li class='is-essential'>Three</li>
                    <li>Four</li>
                </ul>
            </td>
        </tr>
    </table>

    <a class="collapser1">Click me</a>

</div>

CSS

.collapsed td,
.collapsed td * {
    display: none;
}
.collapsed td.is-essential,
.collapsed td.has-essential {
    display: table-cell;
}
.collapsed .is-essential,
.collapsed .has-essential {
    display: block;
}