День добрый! Проблема следующего характера...
Есть адаптивный сайт, на котором при разрешении меньше 768 "прячется" сайдбар шириной 250px (position: absolute; left: -250
, в то же время в хэдере появляется иконка, по клику на которую сайдбару добавляется класс .active{left:0;}.
Здесь все работает так как надо - кликнул по иконке - сайдбар получил класс и выехал, кликнул еще раз - он лишился класса и, соответственно, заехал.
Но, если сузить экран, скажем до 350px, выезжающий сайдбар закрывает иконку. Поэтому было принято решение, на этом разрешении и меньше при клике добавлять/убирать класс самой иконке, который также позиционировал ее абсолютно и сдвигал вправо ровно на столько, на сколько это нужно, чтобы она не закрывалась сайдбаром.
Визуально кажется, что выезжающий сайдбар попросту "сдвигает" иконку в сторону. Но это происходит только после обновления страницы. То есть, если я захожу на сайт например с iPhone 4 в альбомной ориентации (480px), где иконка расположена на достаточно большом расстоянии от активного сайдбара и, естественно, им не закрывается, а потом меняю ориентацию на портретную (320px) без обновления страницы, иконке класс не добавляется и она благополучно закрывается сайдбаром (после обновления все работает как положено).
window.resize полностью проблему не решает - при первом повороте телефона из альбома в портрет, класс добавляется и иконка благополучно ездит туда/сюда при клике, а вот при повторном - уже нет, класс не добавляется. И как решить эту проблему не знаю...
Есть какие-либо соображения на этот счет?
jQuery(document).ready(function($){
$('.icon-menu').click(function() {
$('.sidebar').toggleClass('active');
});
$(window).resize(function() {
var windowWidth = $( window ).width();
if (windowWidth < 435 ) {
$('.icon-menu').click(function() {
$(this).toggleClass('left');
});
};
});
});