在顯示/隱藏時顯示屬性

我正在設計媒體查詢。在較大的設計中，我有幾件物品被hide();隱藏。在顯示/隱藏時顯示屬性

但在較小的設計中，我希望它們保持顯示。所以我用了一個display:block !important值。

現在好了，大版本中的內容被設置爲顯示。哦，混亂！

風格：

@media only screen and (min-width: 180px) { 
    .backCat{display:block !important;} 
} 

@media only screen and (min-width: 768px) { 
    .backCat{display:none;} // no clue what to put here 
}

HTML：

<div id="releases"> 
    <h3>Releases</h3> 
    <ul> 
     <li> 
      <h4>Strangers on a Plain</h4> 
      <img src="http://placehold.it/160x160"> 
      <p><b>Released:</b>August 2011</p> 
     </li> 
     <li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif"> 
      <p><b>Released:</b>August 2010</p> 
     </li> 

     <li class="backCat"><h4>Panic Box</h4><img src="100x100.gif"> 
      <p><b>Released:</b>May 2009</p> 
     </li> 
    </ul> 
    <a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a> 
</div> <!-- end releases -->

$(document).ready(function() { 
    $('.backCat').hide(); 
    $('.moreReleases').click(function(){ 
     $('.backCat').show(500); 
     $('.moreReleases').hide(); 
    }); 
});

來源

2011-12-08 mrtunes

爲什麼你需要使用hide（）調用來將它們隱藏在更大的視圖中？如果您在小設計中刪除display：block行，則會應用較大視圖中的display：none樣式，並且不需要顯式hide（）調用？ – Tarwn

您是否曾嘗試在您的第一個.backcat上放置最大寬度以防止重疊？ @media只有屏幕和（最小寬度：180像素）和（最大寬度：767px） – themerlinproject

大家好只是一個快速的道歉，我沒有看到響應，直到如今。我相信答案就在這裏！將很快恢復與複選標記:) – mrtunes

的!important聲明採取優先次序，因爲在你的第一個媒體查詢min-width條件不再成立時，你的第二個滿意。將您的第一個媒體查詢更改爲@media only screen and (min-width: 180px) and (max-width: 767px)。您也可以簡單地將important置於您的display: none;聲明之後。

來源

2011-12-08 19:02:39 Aaron

您可能需要設置一個最大寬度爲小屏幕的版本，因爲768是至少180

來源

2011-12-08 19:04:03 Robo

好了，測試我上面提出這個想法，它的工作原理：

<style> 
@media only screen and (min-width: 180px) { 
    .moreReleases{ display: none; } 
} 

@media only screen and (min-width: 768px) { 
    .backCat{display:none;} 
    a.moreReleases{display: inline;} 
}  
</style> 

<div id="releases"> 
    <h3>Releases</h3> 
    <ul> 
     <li> 
      <h4>Strangers on a Plain</h4> 
      <img src="http://placehold.it/160x160"> 
      <p><b>Released:</b>August 2011</p> 
     </li> 
     <li class="backCat"><h4>Nagano Car Rental</h4><img src="100x100.gif"> 
      <p><b>Released:</b>August 2010</p> 
     </li> 

     <li class="backCat"><h4>Panic Box</h4><img src="100x100.gif"> 
      <p><b>Released:</b>May 2009</p> 
     </li> 
    </ul> 
    <a href="#" style="float:left; margin-bottom:10px;" class="moreReleases">More Releases</a> 
</div> <!-- end releases --> 
<script language="javascript"> 
$(function() { 
    $('.moreReleases').click(function(){ 
     $('.backCat').show(500); 
     $('.moreReleases').hide(); 
    }); 
}); 

</script>

在小布局我們不做任何事情，只是讓鏈接顯示（並隱藏更多發佈鏈接，因爲它不需要）。在較大的顯示器上，我們默認隱藏塊並顯示moreReleases鏈接。點擊鏈接就可以完成之前的操作，顯示塊並隱藏鏈接。

來源

2011-12-08 19:19:51 Tarwn

.hide（）是「瀏覽器的大小無關」，也不管你的瀏覽器的大小是什麼將運行，這就是爲什麼被較小的屏幕上刪除.backCat。你想從js中刪除它。

一旦你的走了，你會因此它讀取需要刪除重要：

@media only screen and (min-width: 180px) { .backCat{display:block;} }

現在.backCat將顯示在小屏幕上，但是被在更大的屏幕關閉。剩下的就是你必須使其顯示（使用顯示：塊或東西）爲.moreReleases添加stying時.backCat被隱藏，並隱藏（即顯示：無）時，會顯示.backCat。

希望這會有所幫助！

來源

2011-12-08 20:04:35

在顯示/隱藏時顯示屬性

回答

相關問題