如何在单击其中一个时关闭下拉 div<li> 在它里面还是在div外面？

Question

I have a burger icon that show on small screens, on clicking on it a div is shown beneath the navigation menu containing some <li> elements that are used for navigation among pages .

<div class='tabs'>
    <ul class="navs">
        <li class="active"><a href="#" >Home</a></li>
        <li><a href="#" >Organizations</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">Contact</a></li>
        <li><input type="text" class="search-input"><button type="submit" class="search-button"><img src=""/></button></li>
    </ul> 
</div>

The burger icon :

<label for="toggle">&#9776;</label>
<input type="checkbox" id="toggle"></input>

When I click the burger icon the dropdown menu appears and if I click on one of the <li> , active class is added to this <li>

I want to close this dropdown after clicking on one of the <li> or click outside the tabs div using Javascript .

I'm not using Bootstrap or Jquery.

Answer 1

Two solutions here, if you add jQuery or if you want raw JavaScript:

// jQuery version
let toggle = $('#toggle');
let menu = $('.navs');

toggle.click(() => {
  menu.toggleClass('active');
});


// non-jQuery / raw JavaScript 
let toggle = document.getElementById('toggle');
let menu = document.getElementsByClassName('navs');

toggle.addEventListener('mouseup', () => {
  menu.classList.toggle('active');
});

You may have to tweak a little bit to your page. element.classList is standard now, that said some older browsers may not support it.