JavaScript — флажок не активен при нажатии, но панель появляется

Флажок не активен при клике, но панель появляется

https://jsfiddle.net/joel081112/18p0ca5u/13/

Это мой проект jsfiddle tester. У меня есть панель, загружаемая при щелчке гамбургера из класса js-cd-panel-trigger однако она не устанавливает флажок и не позволяет событию анимации произойти. В тот момент, если я уберу это имя класса, событие произойдет без появления панели.

Как я могу изменить свои js чтобы флажок становился true и false при этом позволяя отображать панель? Предупреждения показывают функцию флажка, когда js-cd-panel-trigger класс js-cd-panel-trigger .

 var checkbox = document.getElementById('myCheck'); checkbox.onclick = function () { if (this.checked) { alert('hi'); } else { alert('well well'); } }; (function() { var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger'); if (panelTriggers.length {amp}gt; 0) { for (var i = 0; i {amp}lt; panelTriggers.length; i  ) { (function(i) { var panelClass = 'js-cd-panel-'   panelTriggers[i].getAttribute('data-panel'), panel = document.getElementsByClassName(panelClass)[0]; // open panel when clicking on trigger btn panelTriggers[i].addEventListener('click', function(event) { event.preventDefault(); addClass(panel, 'cd-panel--is-visible'); }); //close panel when clicking on 'x' or outside the panel panel.addEventListener('click', function(event) { if (hasClass(event.target, 'js-cd-close') || hasClass(event.target, panelClass)) { event.preventDefault(); removeClass(panel, 'cd-panel--is-visible'); } }); })(i); } } 
 {amp}lt;div class="hamburger"{amp}gt; {amp}lt;label class="toggle js-cd-panel-trigger" id="menuDisplay" data-panel="main"{amp}gt; {amp}lt;input type="checkbox" id="myCheck"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;svg{amp}gt; {amp}lt;use xlink:href="#path"{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;svg{amp}gt; {amp}lt;use xlink:href="#path"{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"{amp}gt; {amp}lt;symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" id="path"{amp}gt; {amp}lt;path d="M22,22 L2,22 C2,11 11,2 22,2 C33,2 42,11 42,22"{amp}gt;{amp}lt;/path{amp}gt; {amp}lt;/symbol{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; 

Я попытался поставить переключатель в разных местах кода, так как они не работают должным образом.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector