我如何刪除父母與其中的某個孩子（媒體查詢）

我有一個叫做.mainCont的類，我用它來爲每個主體部分。

我遇到的問題是，當網站切換到響應式設計時，我可以隱藏父項中的內容，但由於我無法隱藏父項，所以我留下了一個空矩形。

如果我隱藏父母，那麼一切都會隱藏，如果我隱藏孩子，父母將保持空白。

（我不想傷心地使用任何腳本，這一點，它必須是CSS /媒體查詢。）

下面是HTML，

<div class="mainCont sideCont"> 
    <div class="gridBox"></div><!-- 
    --><div class="gridBox right"></div><!-- 
    --><div class="gridBox bottom"></div><!-- 
    --><div class="gridBox right bottom"></div> 
</div>

我需要隱藏.gridBox但我無法隱藏.mainCont的所有實例，因爲頁面的其他元素使用此選項。

有沒有我可以使用的選擇器？我試過這個，

.gridBox:parent { 
    display: none; 
}

這似乎沒有工作，發現在css-tricks。

我能想到的唯一的其他選擇是給容器一個唯一的ID，但我寧願不必。有任何想法嗎？

這裏是JSFIDDLE看看結構是如何。（某些原因，小提琴將不會顯示我的.gridBox應該如何，但它必須與其它丟失HTML）

這裏是Live Site，看看他們是如何想看看，但相關的代碼在小提琴被隔離。

來源

2013-12-18 Josh Powell

你想隱藏內部'.gridBox'？或者你想隱藏第一個'.gridBox'？ – jackJoe

如果你想隱藏第一個'.gridBox'，你試過'.gridBox：first-child {display：none;}'？ – jackJoe

我想隱藏他們加上他們的父母。我不能只顯示沒有任何類.mainCont，因爲那裏使用的不止是那裏。 –

這是不可能從你的問題還剩下些什麼的時候.gridBox所有實例從其父.mainCont元素消失背後說，但解決辦法是把所有的兒童元素的風格，所以，當他們走了，.mainCont沒有樣式和大小。它仍然在DOM中，但它不可見。

如果您使用CSS創建演示，我可以提供更多幫助。 http://jsfiddle.net

的進一步資料光，你幾乎肯定需要的腳本。把它放在任何地方：

<script> 
jQuery(function($) { 

    var myEls = $('.mainCont').filter(function() { 
     return $(this).find('.gridBox').length === 0; 
    }); 
    $(myEls).hide(); 

}): 
</script>

當然，你需要將它封裝在window.resize函數中。

http://jsfiddle.net/isherwood/XqKW4/3

來源

2013-12-18 17:54:53 isherwood

我剛剛在我的答案底部添加了一個小提琴和活網站。 –

我也在每個頁面上都設置了這個設置，所以我只需要包含'.gridBox'就需要選擇'.mainCont'。 –

啊。您最初並未指出'.mainCont'可能包含不在'.gridBox'實例內的內容。這使我的答案不可行。 – isherwood

我如何刪除父母與其中的某個孩子（媒體查詢）

回答

相關問題