Я довольно новичок в jQuery и css, и я разрабатываю небольшой веб-сайт, в основном для самообразования.
Макет довольно простой, один основной столбец и один боковой столбец.Но для небольших дисплеев или планшетов я хотел воспользоваться запросами экрана @media, чтобы отсоединить боковой столбец и поместить его под основной столбец.И, пока все хорошо, это сработало.
Затем я добавил некоторые виджеты в этот боковой столбец, в основном элементы iframe - никаких проблем.
Именно тогда я столкнулся с чем-то странным.Чтобы обеспечить возможность управления высотой бокового столбца, я решил, чтобы один виджет отображал 2 элемента div (каждый встраивает iframe) поочередно нажатием кнопки, когда этот столбец узкий.Но когда он сложен под основным, он становится шире, и я хотел показать оба iframe рядом и скрыть кнопку выбора.
Странная часть, кажется, работает, пока вы не используете кнопку для переключениявидимость между фреймами.Если вы измените размер окна после нескольких переключений, виджет больше не будет отображать элементы div рядом друг с другом, как это должно происходить в направлении css.Перезагрузка CSS не помогает.Я попытался понять это, и это похоже на то, что jQuery создает другой контекст для элементов, который заменяет директивы @media screen.
Любой намек на то, что я делаю неправильно, будет очень признателен.
Cheers,
Мануэль
Вы можете посмотреть сайт в прямом эфире здесь: пример сайта
Соответствующий (и, конечно, неисправный) код jQuery:
$(document).ready(function() {
$('button', '#sindex').button();
$('button', '#curmet').button();
$("#curmet").bind('click', function(){
$("#sindex").show();
$("#curmet").hide();
$('.stockexindex').css('display', 'none');
$('.stockexcurmet').css('display', 'inline-block');
});
$("#sindex").bind('click', function(){
$("#sindex").hide();
$("#curmet").show();
$('.stockexcurmet').css('display', 'none');
$('.stockexindex').css('display', 'inline-block');
});
});