如何为桌面及移动端导航栏MyLinks项添加兼容的下拉子菜单

1. 调整HTML导航结构 #

仅修改MyLinks对应的<li>标签内容，其余原有代码完全保留即可，修改后的完整导航代码如下：

<div class="nav">
    <input type="checkbox" id="nav-check">
    <div class="nav-header">
    </div>
    <div class="nav-btn">
        <label for="nav-check">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>
    <div class="nav-links" >
        <ul>
            <li class="has-dropdown">
                <a href="MyLinks.html">MyLinks</a>
                <!-- 新增子菜单 -->
                <ul class="submenu">
                    <li><a href="target.html">Link1</a></li>
                    <li><a href="target.html">Link2</a></li>
                    <li><a href="target.html">Link3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

2. 新增兼容双端的CSS样式 #

将以下代码添加到你现有CSS文件末尾，或HTML的<style>标签内：

/* 子菜单基础样式 */
.has-dropdown {
    position: relative;
}
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #fff; /* 可根据你的导航背景色调整 */
    min-width: 120px;
}
.submenu li a {
    padding: 8px 12px;
    display: block;
    text-decoration: none;
    color: inherit;
}
.submenu li a:hover {
    background: #f0f0f0; /* 可根据你的交互色调整 */
}

/* 桌面端样式：hover触发显示 */
@media (min-width: 768px) { /* 768px为通用移动端/桌面端断点，可与你原有导航断点保持一致 */
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .has-dropdown:hover .submenu {
        display: block;
    }
}

/* 移动端样式：点击触发显示 */
@media (max-width: 767px) {
    .submenu {
        padding-left: 15px;
    }
    .submenu.active {
        display: block;
    }
}

3. 新增JavaScript代码 #

放置位置建议：直接放在HTML文件的</body>闭合标签之前即可，不会影响原有页面加载速度：

// 子菜单切换逻辑
const dropdownTrigger = document.querySelector('.has-dropdown > a');
const submenu = document.querySelector('.submenu');

// 点击MyLinks切换子菜单
dropdownTrigger.addEventListener('click', function(e) {
    // 如果你需要点击MyLinks也能跳转原MyLinks.html页面，删除下一行即可
    e.preventDefault();
    submenu.classList.toggle('active');
});

// 点击页面其他区域关闭子菜单
document.addEventListener('click', function(e) {
    if (!e.target.closest('.has-dropdown')) {
        submenu.classList.remove('active');
    }
});

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