1

Добрый день, требуется Ваша помощь. Сделал боковое меню, в главный div прописал:

id="sidebar"

А на кнопку, которая находится выше упомянутом div прописал class:

class="open"

Затем вставил маленький JS код:

var menuElem = document.getElementById('sidebar');
var sidebarElem = menuElem.querySelector('.open');
sidebarElem.onclick = function() {
  menuElem.classList.toggle('close');
};

В css прописал стили чтобы боковое меню после нажатия на кнопку скрывалось на % так 90. Все работает чудесно. Но! При скрытом меню основной контент остается на своем месте, а мне надо чтобы он сдвинулся ровно на столько на сколько я скрыл боковую панель и чтобы было сразу в один клик. И не только основной контент. Так как в getElementById можно вставить один уникальный индификатор, как следует сделать чтобы можно было взаимодействовать с несколькими элементами?

Надеюсь описал понятно, надеюсь на Вашу помощь!

3
  • 1
    'querySelectorAll' для выбора нескольких элементов. По всей видимости у вас sidebar position fixed, вам надо его обернуть вместе в остальным контентом 18 сен 2016 в 15:19
  • Добавьте html,css
    – SVE
    18 сен 2016 в 15:23
  • Если обверну в один, но мне все равно надо указать конкретные элементы, как это сделать? Я в JS не слишком силен. 18 сен 2016 в 18:57

1 ответ 1

1

Населедованием, атачте класс на родительский елемент, нарпимер на body калсс .jsOpen, и от этого класса наследуйте css

/* css */ 

.jsOpen.sidebar {
  свойства
 } 
.jsOpen.content {
  свойства
 }

// JS

$(document).ready(function() {
 $('.button').click(function(){
  $('body').toggleClass('.jsOpen');
 });
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.