Question

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

我遇到的问题是，即使给定元素是显式声明的display: block;，也不会显示其父项的任何是display: none;。

我可以通过在链中添加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下的内容，当父元素获得show-on-collapse时，{strong} 元素可以显示collapsed类。我该怎么办？

Answer 1

如果这些基本元素可以处于细胞的任何深度，那么就没有简单的CSS解决方案。
如果细胞本身就是这些必要的块，即使在行倒塌或他们的孩子或大孩子或......而不是所有这些的混合物时，它也很简单。

因此，你需要一个基本块的所有祖先的课程，否则它不再显示。这是一个小提琴：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;
}

Answer 2

建立FelipeAls的答案（你应该接受，因为他的回答和你一样好，并且能够做到最好），这就是使用SCSS的样子。

table {
    width: 100%

    &.collapsed {
        td {
            display: none

            & * {
                display: none
            }

            &.is-essential, &.has-essential {
                display: table-cell
            }
        }

        .is-essential, .has-essential {
            display: block
        }
    }
}

有选择地隐藏基于父类的子元素

2 个答案: