display切换后SubLinklist内锚点标签点击失效求助

核心问题 #

你当前的实现依赖:focus伪类控制子列表的显示/隐藏：点击➕（hide链接）时，它获得焦点，通过兄弟选择器让子列表显示；但点击子列表内的锚点时，hide链接会立即失去焦点，导致子列表被display: none隐藏，浏览器还没来得及处理锚点的点击事件，所以跳转失效。

另外，hide和show链接的href设为#hide和#show，会触发页面锚点定位，额外干扰交互逻辑。

解决方案1：JavaScript控制（推荐，更稳定） #

用JS监听按钮点击事件，直接切换子列表的显示状态，避免焦点丢失问题：

修改后的HTML

<ul class="Linklist">
    <li class="Linklist__Item" aria-haspopup="true">
        <a href="/pages/collaborations-1" class="Link Link--secondary left">COLLABORATIONS</a>
        <!-- 替换a标签为按钮，避免锚点跳转 -->
        <button class="toggle-btn" tabindex="1">➕</button>

        <ul class="SubLinklist" id="list">
            <li class="Linklist__SubItem">
                <a href="/pages/collaborations" class="Link Link--secondary">ALISA KARIN</a>
            </li>
            <li class="Linklist__SubItem">
                <a href="/pages/jeffrey-campbell-x-jade-venturi" class="Link Link--secondary">JEFFREY CAMPBELL</a>
            </li>
        </ul>
    </li>
    <li class="Linklist__Item">
        <a href="/pages/music" class="Link Link--secondary left">PLAYLISTS</a>
    </li>
    <li class="Linklist__Item">
        <a href="/blogs/news" class="Link Link--secondary left">PRESS</a>
    </li>
    <li class="Linklist__Item">
        <a href="https://www.instagram.com/jadeventuri_/" class="Link Link--secondary left">INSTAGRAM</a>
    </li>
</ul>

调整后的CSS

.SubLinklist {
    list-style: none;
    display: none; /* 默认隐藏 */
}
.Linklist__SubItem {
    padding-top: 10px;
}
.toggle-btn {
    float: right;
    margin-right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
}
/* 新增显示状态类 */
.SubLinklist.show {
    display: block!important;
    padding-left: 20px;
    padding-bottom: 10px;
}

JavaScript代码

document.querySelector('.toggle-btn').addEventListener('click', function() {
    const subList = document.getElementById('list');
    subList.classList.toggle('show');
    // 切换按钮文本
    this.textContent = subList.classList.contains('show') ? '➖' : '➕';
});

解决方案2：纯CSS替代方案（用复选框） #

如果不想用JS，可通过隐藏的复选框控制状态，避免焦点丢失：

修改后的HTML

<ul class="Linklist">
    <li class="Linklist__Item" aria-haspopup="true">
        <a href="/pages/collaborations-1" class="Link Link--secondary left">COLLABORATIONS</a>
        <!-- 隐藏的复选框 -->
        <input type="checkbox" id="toggle-sublist" class="toggle-checkbox">
        <!-- 用label触发复选框状态切换 -->
        <label for="toggle-sublist" class="toggle-btn"></label>

        <ul class="SubLinklist" id="list">
            <li class="Linklist__SubItem">
                <a href="/pages/collaborations" class="Link Link--secondary">ALISA KARIN</a>
            </li>
            <li class="Linklist__SubItem">
                <a href="/pages/jeffrey-campbell-x-jade-venturi" class="Link Link--secondary">JEFFREY CAMPBELL</a>
            </li>
        </ul>
    </li>
    <li class="Linklist__Item">
        <a href="/pages/music" class="Link Link--secondary left">PLAYLISTS</a>
    </li>
    <li class="Linklist__Item">
        <a href="/blogs/news" class="Link Link--secondary left">PRESS</a>
    </li>
    <li class="Linklist__Item">
        <a href="https://www.instagram.com/jadeventuri_/" class="Link Link--secondary left">INSTAGRAM</a>
    </li>
</ul>

调整后的CSS

.SubLinklist {
    list-style: none;
    display: none;
}
.Linklist__SubItem {
    padding-top: 10px;
}
.toggle-checkbox {
    display: none; /* 隐藏复选框 */
}
.toggle-btn {
    float: right;
    margin-right: 30px;
    cursor: pointer;
}
/* 按钮默认文本 */
.toggle-btn::after {
    content: '➕';
}
/* 复选框选中时显示子列表并切换按钮文本 */
.toggle-checkbox:checked ~ .SubLinklist {
    display: block!important;
    padding-left: 20px;
    padding-bottom: 10px;
}
.toggle-checkbox:checked ~ .toggle-btn::after {
    content: '➖';
}

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