Умное сворачивание сайдбаров js

339
26 января 2017, 01:17

Есть 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"); 
    } 
  });

READ ALSO
Ожидание закрытия
HTML

Ожидание закрытия

Как заставить элемент списка в котором есть менять фоновый цвет, после того как подменю исчезло? https://jsfiddlenet/b5uma4re/13/ Сейчас если навести и убирать...

 326
Отправка файла из формы на почту [требует правки]
HTML

Отправка файла из формы на почту [требует правки]

ЗдравствуйтеКак можно отправить файл из трех разных форм на странице на почту без перезагрузки страницы?

 327
Как добавить в форму поиска текст ссылки при нажатии на неё?
HTML

Как добавить в форму поиска текст ссылки при нажатии на неё?

Здравствуйте!!! Помогите люди добрые, Есть форма поиска RokAjaxSearch, есть карта рисунка со ссылками, мне надо сделать так чтобы при нажатии на ссылку...

 361
svg text в вектор
HTML

svg text в вектор

ПриветствуюЭкспериментирую с svg и столкнулся с проблемой

 269