2012-10-05 2 views
2

Итак, у меня есть макет, который является 2up на широких мониторах, а затем просмотр списка на более мелких мониторах с использованием медиа-запросов. Все работает очень хорошо, за исключением того, что у меня также есть элементы jQuery .show() /. Hide() ing в широкоэкранной настройке. То, что хорошо работает, но когда я изменяю размер моего окна: все, что jQuery имеет в настоящее время .hide() d делает не, несмотря на мои медиа-запросы, определяющие отображение: block; для тех элементов такого размера.jQuery .hide() не отменяется медиа-запросом

Сайт размещается here, а источник on GitHub.

Что я делаю неправильно и как я могу это исправить?

+0

Не могли бы вы уточнить, какие конкретные элементы вы пытаетесь скрыть/показать? Потому что я посетил ваш сайт и просмотрел его в обеих формах, и он работает как ожидалось: двойной просмотр (широкоэкранный) и просмотр списка (не широкоэкранный). Не зная, какие конкретные элементы вы пытаетесь скрыть/показать, любые предложения будут просто поверхностными. – jrd1

+0

Ах, извините, если было неясно: страницы справа, когда они переключались с помощью кнопок вверху. Когда вы это сделаете и затем измените размер, страницы, которые были показаны, затем скрыты, не видны. По крайней мере, не в хроме. – jarofghosts

+0

Я пробовал то, что вы предлагали, и наблюдал то же самое. Кажется, что ваша проблема может быть ошибкой в ​​самом проекте. Помимо того, что вы сами выкалываете в исходном коде, может быть лучше связаться с оригинальным разработчиком Github и записать отчет об ошибке. – jrd1

ответ

3

первую очередь JQuery заменяет стиль элемента, который вы изменить, так что независимо от того, что предыдущий CSS, если вы используете:

$("#myelement").hide(); 

будет принудительно изменить свойство отображения CSS, у вас есть 2 варианта здесь.

1) Создайте скрытый класс, таким образом вы можете создать медиа-запрос для класса, поэтому, когда окно будет> 1000px, оно будет отображаться: none; но если он имеет 1000 <, он может иметь отображение: block; используя:

$("#myElement").addClass("hidden"); 

вместо hide().

2) Играть с изменения размера() случае JQuery http://api.jquery.com/resize/ связанного приложения к окну, таким образом, вы можете сделать это:

$(window).resize(function(){ 
    if($(window).width()> 1000){ 
     //Hide or show, or do some pirate stuff 
    }else{ 
     //More pirate stuff 
    } 
}); 

Я надеюсь, что это было то, что вы искали.

Смежные вопросы