HTML中如何实现点击按钮显示响应式侧边导航栏并添加关闭功能

该需求完全可以实现，你现有代码存在几个核心问题导致功能无法正常运行，对应修改方案如下：

存在的核心问题 #

• 选择器逻辑错误：.show-nav:target nav 无法选中作为同级元素的导航栏，且:target伪类需要配合锚点ID使用才能生效
• 交互逻辑错误：按钮内嵌套空href的a标签，点击后会触发页面刷新，无法实现预期交互
• 缺少关闭按钮的结构与对应的样式定义

完整实现代码（纯CSS方案，无需JS） #

HTML代码

<!-- 触发按钮改为a标签，锚点指向导航栏ID -->
<a href="#mobile-nav" class="show-nav">Navigation</a>

<nav id="mobile-nav">
  <!-- 新增关闭按钮，锚点指向空ID取消target状态 -->
  <a href="#" class="close-nav">×</a>
  <h1>Navigation:</h1>
  <br>
  <a href="link.html">Link</a>
  <a href="link.html">Link</a>
  <a href="link.html">Link</a>
  <a href="link.html">Link</a>
  <a href="link.html">Link</a>
  <a href="link.html">Link</a>
  <br>
</nav>

CSS代码

nav {
    position: fixed;
    top: 0px;
    left: 0;
    width: 400px;
    height: 100%;
    background: #fff;
    color: #111;
    text-align: center;
    padding-top: 25px;
    border: none;
    border-right: 5px solid #0088ff;
    z-index: 999; /* 提高层级避免被其他元素遮挡 */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 关闭按钮样式 */
.close-nav {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #111;
    text-decoration: none;
}

nav h1, h2, h3, h4, h5, h6 {
    color: #111;
}

.show-nav {
    background: #0088ff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    position: fixed; /* 新增固定定位避免按钮滚动消失 */
    top: 200px;
    left: 50px;
    display: none;
    text-decoration: none;
    z-index: 10;
}

.show-nav i {
    color: #fff;
}

.show-nav a {
    color: #fff;
}

@media screen and (max-width: 662px) {
    nav {
        display: none;
    }
    .show-nav {
        display: block;
    }
    /* 导航栏被锚点选中时的展开样式 */
    #mobile-nav:target {
        display: flex;
        width: 100%;
        border-right: none;
    }
}

可选优化方案（JS实现，无锚点跳转问题） #

如果不想触发页面锚点跳转，可以用简单的JS实现类名切换，只需要在原有代码基础上添加如下JS代码即可：

const showBtn = document.querySelector('.show-nav')
const closeBtn = document.querySelector('.close-nav')
const nav = document.querySelector('nav')

showBtn.addEventListener('click', (e) => {
  e.preventDefault()
  nav.classList.add('active')
})

closeBtn.addEventListener('click', (e) => {
  e.preventDefault()
  nav.classList.remove('active')
})

同时把媒体查询里的#mobile-nav:target选择器替换为nav.active即可。

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