有選擇地隱藏基於父級的子元素

我有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; } 
    } 
    } 
}

我」什麼m尋找是&.collapsed，這使得只有元素show-on-collapse是可見的，當父元素獲得collapsed類。我該怎麼辦？

來源

2014-06-16 asfallows

我不知道SASS是否有任何東西可以根據孩子定位父母。但是，你試圖做的絕對不能在css中完成，除非你添加類td – Huangism

@黃色Sass是*僅* CSS預處理器。作爲LESS和Stylus，它輸出常規的CSS，並且在CSS中沒有父選擇器（現在，可能會在一天內實現） – FelipeAls

如果這些基本元素可以處於單元格的任何深度級別，那麼就沒有簡單的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; 
}

來源

2014-06-16 18:37:07 FelipeAls

大廈關閉FelipeAls的回答（你應該接受，因爲他的回答是一樣好，你就可以做的最有可能的），這裏是它使用SCSS會是什麼樣子。

table { 
    width: 100% 

    &.collapsed { 
     td { 
      display: none 

      & * { 
       display: none 
      } 

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

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

來源

2014-06-18 16:47:49 SethGunnells

有選擇地隱藏基於父級的子元素

回答

相關問題