Javascript 如何单击其中一个<；李>；在里面还是在外面？

我有一个汉堡图标显示在小屏幕上，点击它，导航菜单下会显示一个div，其中包含一些用于页面间导航的

元素

<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>

汉堡图标：

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

☰；

当我单击汉堡图标时，会出现下拉菜单，如果我单击其中一个

，

活动的
类会添加到此

我想在单击其中一个
或使用Javascript单击
选项卡外部的
div后关闭此下拉列表

我没有使用Bootstrap或Jquery。
如果您添加Jquery或想要原始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');
});

您可能需要对页面进行一些调整<代码>元素。类列表现在是标准的，这意味着一些旧浏览器可能不支持它。
请分享您尝试过的内容和收到的任何错误。我没有尝试过，因为我不确定如何实现我不想添加“活动”类，我已经这样做了，我想在单击某个lis或在“导航”部分之外关闭“导航”部分。当然，你只需要使用不同的css类来控制显示/隐藏。不必是“主动的”。也可以手动设置“显示：无显示：块”属性，但我不建议使用该路线。