如何实现点击侧边导航内链接时关闭侧边导航模块？

问题描述 #

点击侧边导航（sidenav）内的链接时，链接跳转功能正常，但侧边导航模块无法自动关闭，需要实现点击任意导航链接后关闭侧边导航的功能。

现有代码 #

index.html #

<!-- side navbar -->
<div class="sidenav" id="sidenav">
    <span class="cancel-btn" id="cancel-btn">
        <i class="fas fa-times"></i>
    </span>

    <ul class="navbar">
        <li><a href="#header" id = "closemodal">home</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#rooms">rooms</a></li>
        <li><a href="#customers">customers</a></li>
    </ul>

</div>
<!-- end of side navbar -->

<!-- fullscreen modal -->
<div id="modal"></div>
<!-- end of fullscreen modal -->

script.js #

const navBtn = document.getElementById('nav-btn');
const cancelBtn = document.getElementById('cancel-btn');
const sideNav = document.getElementById('sidenav');
const modal = document.getElementById('modal');

navBtn.addEventListener("click", function(){
    sideNav.classList.add('show');
    modal.classList.add('showModal');
});

cancelBtn.addEventListener('click', function(){
    sideNav.classList.remove('show');
    modal.classList.remove('showModal');
});

window.addEventListener('click', function(event){
    if(event.target === modal){
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    }
});

无效代码分析 #

之前尝试的jQuery代码无效，原因是：

• 你的侧边导航并非Bootstrap modal组件，modal('hide')方法不适用
• 仅给第一个链接添加了closemodalID，无法覆盖所有导航链接

解决方案 #

提供两种可行实现方式：

方案1：给所有导航链接绑定点击事件 #

修改script.js，添加对所有导航链接的事件监听：

const navBtn = document.getElementById('nav-btn');
const cancelBtn = document.getElementById('cancel-btn');
const sideNav = document.getElementById('sidenav');
const modal = document.getElementById('modal');
// 获取所有导航链接
const navLinks = document.querySelectorAll('.navbar a');

navBtn.addEventListener("click", function(){
    sideNav.classList.add('show');
    modal.classList.add('showModal');
});

cancelBtn.addEventListener('click', function(){
    sideNav.classList.remove('show');
    modal.classList.remove('showModal');
});

window.addEventListener('click', function(event){
    if(event.target === modal){
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    }
});

// 给每个导航链接添加关闭侧边导航的事件
navLinks.forEach(link => {
    link.addEventListener('click', function() {
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    });
});

方案2：事件委托（更高效） #

如果导航链接可能动态生成，推荐使用事件委托，仅给父元素绑定一次事件：

const navBtn = document.getElementById('nav-btn');
const cancelBtn = document.getElementById('cancel-btn');
const sideNav = document.getElementById('sidenav');
const modal = document.getElementById('modal');
const navbar = document.querySelector('.navbar');

navBtn.addEventListener("click", function(){
    sideNav.classList.add('show');
    modal.classList.add('showModal');
});

cancelBtn.addEventListener('click', function(){
    sideNav.classList.remove('show');
    modal.classList.remove('showModal');
});

window.addEventListener('click', function(event){
    if(event.target === modal){
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    }
});

// 事件委托：监听父元素点击，判断是否点击了链接
navbar.addEventListener('click', function(event) {
    if(event.target.tagName === 'A') {
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    }
});

两种方案都会在点击任意导航链接时，移除侧边导航的show类和遮罩层的showModal类，实现关闭效果，同时不影响链接的跳转功能。

内容的提问来源于stack exchange，提问作者Allan Solitei