Я использую скрипт переключения (открывающий / закрывающий текстовый контейнер при нажатии на определенную ссылку) для веб-сайта, использующего jQuery. Чтобы очистить веб-сайт, я хочу полностью избавиться от jQuery, но у меня есть некоторые проблемы с преобразованием существующего кода jQuery в «обычный javascript».
Вот существующий код:
jQuery(function($){
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
return false; //Prevent the browser jump to the link anchor
});
});
});
Что соответствует этому исходному коду HTML:
<h4 class="trigger toggle-transparent "><a href="#">Click to show more</a></h3><div class="toggle_container ">
Hidden Text
</div>
Я пробовал следующий код, который не выдает ошибку, но ничего не делает при нажатии на триггер:
var el = document.querySelectorAll('h4.trigger');
for(var i=0; i < el.length; i++){
el[i].addEventListener('click', function () {
this.classList.toggle("active").nextSibling.classList.toggle("toggle_container-active");
}.bind(this));
}
Единственное, что мне действительно нужно для кода: нажатие на класс «trigger» должно переключить некоторый HTML-класс «active» как на элемент триггера, так и на элемент toggle_container. Остальное я могу изменить только с помощью CSS.
Сложная часть кода заключается в том, что он должен работать для нескольких областей переключения на одной странице отдельно (поэтому используется класс, а не идентификатор).
Любая идея, где мой код имеет проблемы или какие-либо (полностью) разные предложения?
У меня очень ограниченный опыт работы с javascript / jQuery и я чувствую себя как дома с HTML / CSS.
Спасибо, Патрик