jquery - 显示/隐藏时显示属性

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

您可能需要为较小的屏幕版本设置最大宽度，因为 768 至少是 180