下拉菜单链接无法跳转至指定href锚点问题求助

问题修复方案 #

核心问题诊断 #

你的下拉菜单链接无响应，主要由HTML结构错误、CSS显示逻辑冲突和JS选择器不匹配导致，以下是分步修复：

1. 修正HTML结构错误 #

问题点：

• 多个按钮使用重复ID panel-links（ID必须唯一）
• Resume链接的href属性写法错误（多嵌套了href=）
• Button内部嵌套a标签不符合HTML规范，浏览器解析会异常

修复后HTML：

<header>
    <div id="logo1"></div>
    <div id="logo2"></div>
    <div class="buttonpane">
        <button class="panel-links" onclick="location.href='#about-me-section'">ABOUT ME</button>
        <button class="panel-links" onclick="location.href='#projects-section'">PROJECTS</button>
        <!-- 把按钮嵌套a改成独立a标签模拟按钮样式 -->
        <a id="resume" href="documents/resume/resume.pdf" download="Parth_Datwani_Resume" target="_blank">Resume</a>
    </div>

    <div class="dropdown">
        <button class="dropdown-btn" aria-haspopup="menu">
            <span>Menu</span>
        </button>
        <ul class="dropdown-content" role="menu">
            <li><a href="#about-me-section">About Me</a></li>
            <li><a href="#projects-section">Projects</a></li>
            <li><a href="documents/resume/resume.pdf" download="Parth_Datwani_Resume" target="_blank">Resume</a></li>
        </ul>
    </div>
</header>

<!-- 测试用锚点区域 -->
<section id="about-me-section" style="height: 800px; background: #eee;">About Me Section</section>
<section id="projects-section" style="height: 800px; background: #ddd;">Projects Section</section>

2. 修复CSS响应式与下拉逻辑 #

问题点：

• 响应式切换未定义（需指定屏幕宽度切换按钮面板/下拉菜单）
• 下拉菜单混用display: none和visibility: visible，导致显示冲突
• z-index层级不足，可能被其他元素遮挡

修复后CSS：

/* 响应式切换：768px以下显示下拉，隐藏按钮面板 */
@media (max-width: 767px) {
    .buttonpane { display: none; }
    .dropdown { display: block; }
}

@media (min-width: 768px) {
    .buttonpane { display: block; }
    .dropdown { display: none; }
}

/* 下拉菜单核心样式 */
.dropdown {
    max-width: 13em;
    position: relative;
    width: 100%;
}
  
.dropdown-btn {
    width: 100%;
    padding: 10px 20px;
    background: #fff;
    font-size: 1em;
    border-radius: 20px;
    color: #000;
    border: 2px solid #000;
    cursor: pointer;
}
  
.dropdown-content {
    display: none;
    width: 100%;
    padding: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 100; /* 确保菜单在最上层 */
}

.dropdown-content li {
    text-align: center;
    width: 100%;
    list-style: none;
    padding: 2px;
}

.dropdown-content li a {
    color: #000;
    text-decoration: none;
    display: block;
    padding: 10px;
}

.dropdown-content li a:hover { background: #cbc9ca; }
.dropdown-content li:hover { background: #b7b1b4; }

/* 用active类控制菜单显示，替代不稳定的focus/active伪类 */
.dropdown.active .dropdown-content { display: block; }

/* 按钮面板样式修正 */
#resume {
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    font-size: 1.5em;
    border-radius: 20px;
    color: #000;
    border: 2px solid #000;
    cursor: pointer;
    text-decoration: none;
}

#resume:hover { background: #e5e1e2; }

.panel-links {
    font-size: 1.5em;
    background: #fff;
    color: #000;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
}

.panel-links:hover {
    background: #e5e1e2;
    border-radius: 10px;
}

3. 修复JS交互逻辑 #

问题点：

• 原JS监听a[data-href]，但HTML中未设置该属性，导致无触发
• 下拉菜单无点击关闭逻辑，体验不佳

修复后JS：

$(document).ready(function() {
    // 下拉菜单切换
    $('.dropdown-btn').click(function(e) {
        e.stopPropagation();
        $('.dropdown').toggleClass('active');
    });

    // 点击页面其他区域关闭下拉
    $(document).click(function(e) {
        if (!$(e.target).closest('.dropdown').length) {
            $('.dropdown').removeClass('active');
        }
    });

    // 平滑滚动到锚点（替代原data-href逻辑）
    $('a[href^="#"]').click(function(e) {
        e.preventDefault();
        const target = $(this.getAttribute('href'));
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            // 移动端点击后自动关闭菜单
            $('.dropdown').removeClass('active');
        }
    });
});

修复说明 #

1. 重复ID：将#panel-links改为.panel-links，避免浏览器解析异常
2. 链接错误：修正Resume的href路径，确保文件可正常下载
3. 嵌套问题：移除button内的a标签，改用a标签模拟按钮样式，符合HTML规范
4. 响应式切换：通过媒体查询实现指定宽度下的导航切换
5. 下拉逻辑：用active类控制菜单显示，替代不稳定的伪类，同时添加点击外部关闭功能
6. 平滑滚动：直接监听锚点链接，无需改用data-href，逻辑更简洁

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