Умное сворачивание сайдбаров js
Есть 2 сайдбара. Левый/правый, оба она сворачиваются/разворачиваются. Но задача состоит в том чтобы при ширине обертки <1500px выполнялись чуть другие условия , а именно:
У меня экран 1280px - при заходе на сайт развернут только левый сайдбар (то есть правый при таком разрешении скрыт) (по умолчанию (>1500px) оба сайдбара развернуты). При попытке развернуть правый, сворачивается левый , и открывается правый. и наоборот.
Так как js , я только постепенно начинаю изучать, набросал мега костильный вариант.
Как реализовать это более правильно и не костыльно?
$("#menu-toggle").click(function(){
$("#left-menu").toggleClass("menu-hidden");
$(".wide-mode").toggleClass("menu-hidden");
$(".wide-mode").toggleClass("menu-show");
});
$("#right-menu-toggle").click(function(){
$(".wide-mode").addClass("chat-hidden");
$(".wide-mode").toggleClass("chat-show");
});
$("#right-menu-show").click(function(){
$(".wide-mode").removeClass("chat-hidden");
$(".wide-mode").addClass("chat-show");
});
$(window).resize(function(){
var windowWidth = $(window).width();
if(windowWidth < 1500) {
$("#right-menu-show").click(function(){
$("#left-menu").addClass("menu-hidden");
$(".wide-mode").addClass("menu-hidden");
$(".wide-mode").removeClass("menu-show");
});
$("#menu-toggle").click(function(){
$(".wide-mode").addClass("chat-hidden");
$(".wide-mode").removeClass("chat-show");
});
}
else {
}
});
$(window).resize(function(){
var windowWidth = $(window).width();
if(windowWidth < 1500) {
$(".wide-mode").addClass("menu-hidden");
$(".wide-mode").addClass("chat-hidden");
$("#left-menu").addClass("menu-hidden");
$(".wide-mode").removeClass("chat-show");
$(".wide-mode").removeClass("menu-show");
}
else {
$("#left-menu").removeClass("menu-hidden");
$(".wide-mode").removeClass("menu-hidden");
$(".wide-mode").removeClass("chat-hidden");
}
});
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47907 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23895 visits
- Как через css изменить цвет png изображения? 10397 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9275 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 24.3.2025 | 10:38