Здравствуйте. Я верстаю один сайт. Изучаю JavaScript. С JQuery пока дружу не особо. Хотел сделать меню-бургер для мобильных устройств (это ведь так называется?). Суть проблемы была сделать так, чтобы при первом клике на главный пункт, выходило меню с остальными, а при повторном клике остальные пункты скрывались. Сделал блок в HTML:
<div class = "phone_navigation">
<div class = "main_href" id="something">
<p class = "hrefs">Товары</p>
</div>
<div class = "etc_hrefs">
<p class = "hrefs">Главная</p>
<p class = "hrefs">Услуги</p>
<p class = "hrefs">Задать вопрос</p>
<p class = "hrefs">Наш офис</p>
</div>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita amet vero, sapiente maiores quas
ullam quae. Aperiam repellat sunt accusantium, debitis, ullam quia reprehenderit distinctio corrupti
tenetur non tempora blanditiis?</p>
Задал значения в CSS:
div.phone_navigation{
display: block;
}
div.etc_hrefs{
display: block;
position: absolute;
background: white;
z-index: 50;
width: 100%;
left: -100%;
transition-property: left;
transition-duration: 0.8s;
transition-timing-function: ease;
}
p.hrefs{
margin-left: 2%;
}
Откопал вот такой код с Оверфлов и немного подогнал под свои нужды:
$('#something').on('click', function() {
if (!$(this).hasClass('clicked')) { // если класса нет
$(this).addClass('clicked'); // добавляем класс
document.getElementsByClassName('etc_hrefs')[0].style.left = '0'; // код для первого клика
} else { // если есть
$(this).removeClass('clicked'); // убираем класс
document.getElementsByClassName('etc_hrefs')[0].style.left = '-100%'; // код для второго клика
}
});
Все работает, но хотелось бы чтобы меню скрывалось при нажатии на контент сайта. То есть я нажал на главный пункт - содержимое появилось, захотел скрыть - нажал на любой элемент на сайте. Буду благодарен за любую подсказку!
