отображать свойство при выполнении показать / скрыть

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

.hide () является "независимым от размера браузера" и будет работать независимо от размера вашего браузера, и поэтому .backCat удаляется на меньшем экране.Вы хотите удалить это из js.

Как только вы это сделаете, вам нужно будет удалить! Важный, чтобы он читал:

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

Сейчас.BackCat будет отображаться на экранах меньшего размера, но отключается на большом экране.Осталось только добавить stying для .moreReleases, чтобы он отображал (используя display: block или что-то другое), когда .backCat скрыт, и скрывает (то есть display: none), когда отображается .backCat.* Надеюсь, это поможет!

Answer 2

Возможно, вам потребуется установить максимальную ширину для уменьшенной версии экрана, поскольку 768 составляет не менее 180

Answer 3

Хорошо, проверил идею, которую я предложил выше, и она работает:

<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.Щелчок по ссылке делает то же, что и раньше, показывая блоки и скрывая ссылку.

Answer 4

объявление !important имеет приоритет, так как условие min-width в вашем первом медиа-запросе остается верным, когда удовлетворяется ваш второй.Измените свой первый медиа-запрос на @media only screen and (min-width: 180px) and (max-width: 767px).Вы также можете просто оставить important позади своей display: none; декларации.