Very good everyone, I have the following hamburger menu
var hamburger = document.querySelector(".hamburg");
hamburger.onclick = function () {
this.classList.toggle("checked");
}input#hamburg {
display: none
}
.hamburg {
display: block;
width: 75px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
transition: border-radius .5s;
cursor: pointer;
}
.line {
position: absolute;
left: 10px;
height: 4px;
width: 55px;
background: #054A99;
border-radius: 2px;
display: block;
transition: 0.5s;
transform-origin: center;
}
.line:nth-child(2) {
background: #FEAA14;
}
.line:nth-child(1) {
top: 12px;
}
.line:nth-child(2) {
top: 24px;
}
.line:nth-child(3) {
top: 36px;
}
.hamburg.checked .line:nth-child(1) {
transform: translateY(12px) rotate(-45deg);
}
.hamburg.checked .line:nth-child(2) {
opacity: 0;
}
.hamburg.checked .line:nth-child(3) {
transform: translateY(-12px) rotate(45deg);
}
.resp-menu nav.topmenu {
height: auto;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
}
#hamburg:checked + .hamburg + nav.topmenu {
max-height: 600px;
}<div class="resp-menu">
<input type="checkbox" id="hamburg">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
<nav class="topmenu">
<div class="menu-menue-container">
<ul id="menu-menue-1" class="menu">
<li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-184"><a href="#start">Start</a></li>
<li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#kevMACCs">KEV/MACCs</a></li>
<li class="anchor menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#angebot">Unser Angebot</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#ihreVorteile">Ihre Vorteile</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#warumtxs">Warum TXS</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#contact">Kontakt</a></li>
</ul>
</div>
</nav>
</div>And I need to implement a oneclick event that makes that when I click on any of the links, the menu closes automatically. What I tried was this, but it does not work since my knowledge of javascript is and jquery is very limited.
$('.resp-manu ul > li a').on('click', function (event) {
$('.hamburg').toggle();
});
It does not throw away any errors, but basically it does not work. when doing the code control with the browser, basically this is skipped and I think the fault is that I'm not pointing well with the code, but I do not see the failure.
If someone were so kind to guide me to where the fault is, it would be very helpful. Thank you very much