Ребята, всем привет! Рад что Вы нашли время для ознакомления с данным материалом, а я постараюсь в свою очередь рассказать все по подробнее. Сегодня мы научимся создавать аккордеон для сайта по классу, а не по идентификатору, как в прошлом уроке, а также реализуем простой функционал на JavaScript. Практически весь функционал аккордеона для сайта по id нам потребуется в данном уроке, поэтому удаляем только некоторые моменты, а вернее их часть.
Так как материал я подготовил еще и в видео формате, поэтому вкратце тут пробежимся по теме. Объясню что, как и для чего, если кому-то будет не ясно, оставляйте комментарии, с радостью отвечу)
Но все же, я стараюсь объяснять доступно, разжевывать, может это и смешно, зато меньше вопросов)
Сразу приступаем к подключению файла стилей demo.css и скрипт main.js. Больше нам в принципе, ничего и не потребуется.
<link rel="stylesheet" href="css/demo.css"> <script src="js/main.js"></script>
Теперь все по аналогии, как и в прошлом уроке, за исключением, что нам теперь вместо идентификатора, потребуются классы.
RootHelp, аккордеон, по классу, <a class='accordeon'>˅</a> <div class='list'>сайт, RootHelp.ru, аккордеон для сайта</div><br> RootHelp, аккордеон, по классу, <a class='accordeon'>˅</a> <div class='list'>сайт, RootHelp.ru, аккордеон для сайта</div><br>
Переходим к стилям CSS и тут опять же, меняем только идентификаторы, на классы.
.accordeon{
cursor:pointer;
color:#000055;
font-weight:bold;
}
.list{
display:none;
}
Переходим к изменению JavaScript кода. Весь код переписывать не будем, оставим условие, которое нам еще приходится, а также событие onload. Для начала потребуется создать переменную, допустим btn, в которую запишем метод document.querySelectorAll() с классом accordeon, соответствующий классам на HTML странице.
Затем нам потребуется цикл for, в который запишем перечисление нумерации элементов переменной btn. Ведь мы уже работаем не с одним элементом, а с целым массивом. Для этого прописываем в цикл for значения, начиная с нулевого аргумента и до размера длины его последнего значения.
Далее внутрь цикла нам потребуется записать данные элементы, для этого создаем переменную btn с нумерацией по циклу, в которую запишем метод addEventListener().
Целевым объектом может быть объект Element, Document или любой другой объект имеющий события, например, такой как Window. Метод поддерживает следующие аргументы - это тип события, обработчик и фразу. Далее мы копируем условие, с предыдущего урока и заменяем свойство Listing на nextElementSibling, с помощью которого можно получить соседа снизу, или по простому следующий элемент.
Также существует свойство PreviousElementSibling, которое работает также, как и предыдущее, но с одним условием, оно возвращает соседа сверху. Также меняем данное свойство в самом условии, так как иначе ничего работать у нас не будет.
window.onload= function() {
var btn = document.querySelectorAll('.accordeon');
for(i=0; i < btn.length; i++){
btn[i].addEventListener('click', function(){
if(this.nextElementSibling.style.display == 'block') {
this.nextElementSibling.style.display = 'none';
accordeon.innerHTML = '˅';
}
else {
this.nextElementSibling.style.display = 'block';
accordeon.innerHTML = '˄';
}
});
}
};
На этом как бы все, большое спасибо за внимание! Надеюсь, все объяснил доходчиво) Не забывайте оставлять лайки, комментарии и по возможности подписывайтесь на наши соц.сети ниже, чтобы не пропустить новые материалы, которые не всегда публикуются именно на сайте)