表示/非表示を切り替えるときの表示プロパティ

Question

ここではメディアクエリを使用したデザインを行っています。より大きなデザインでは、私は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 --> 

JS

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

Answer 1

たときに、2番目の最初のメディアクエリーでmin-width条件が真のままなので!important宣言が優先さを取っています満足している。最初のメディアクエリを@media only screen and (min-width: 180px) and (max-width: 767px)に変更します。また、display: none;宣言の後ろにimportantを置くだけでも逃げることができます。

Answer 2

あなたは768、少なくとも180

Answer 3

OKですので、小さな画面のバージョンの最大幅を設定する必要があるかもしれませんが、私は上記の提案のアイデアをテストし、それが動作します：

<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> 

を小型に私たちは何もしません。ただリンクを表示させてください（不要なので、より多くのリリースリンクを隠す）。大きなディスプレイでは、デフォルトでブロックを非表示にし、moreReleaseリンクを表示します。リンクをクリックすると、前に行ったこと、ブロックの表示、リンクの非表示が実行されます。

Answer 4

.hide（）はブラウザのサイズに関係なく実行され、ブラウザのサイズに関係なく実行されます。そのため、小さな画面で.backCatが削除されています。これをjsから削除したいとします。

あなたがなくなって、あなたが削除する必要がありますすることが重要、それは読みようたら：！

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

今.backCatは、小さな画面上に表示されますが、大きな画面でオフになってます。残っているものは、.moreCreateが表示されているときに.backCatが隠されているときに表示されるように（display：blockまたは何かを使って）表示され、.backCatが表示されているときに隠れる（すなわちdisplay：none）。

希望すると便利です。