如何实现侧边栏A-Z下拉列表默认隐藏内容，点击后显示？

问题根源 #

1. CSS将缩进和隐藏逻辑绑定在同一个类indent，导致父元素ul被隐藏后，JS操作子元素li的display无法生效（父元素隐藏时子元素无论如何都不会显示）。
2. JS逻辑错误：试图切换子li的显示状态，而非控制包裹项目的ul容器。

修复步骤 #

1. 修正HTML结构

给每个字母对应的项目列表容器ul添加统一类名（比如letter-dropdown），缩进类indent只用于子项目的缩进，避免功能混淆：

<li><span>A</span>
    <ul class="letter-dropdown">
        <li class="indent">Apex Legends</li>
    </ul>
</li>
<li><span>B</span>
    <ul class="letter-dropdown">
        <li class="indent">Baldur's Gate</li>
        <li class="indent">Baldur's Gate II: Shadows of Amn</li>
        <li class="indent">Baldur's Gate II: Shadows of Amn (Solo)</li>
        <li class="indent">Baldur’s Gate II: Throne of Bhaal</li>
        <li class="indent">Baldur's Gate III (Livestream)</li>
        <li class="indent">Baldur's Gate: Enhanced Edition</li>
        <li class="indent">Baldur's Gate: Enhanced Edition (Livestream)</li>
        <li class="indent">BioShock Infinite (Livestream)</li>
        <li class="indent">Blood Bowl (Dark Elves)</li>
        <li class="indent">Blood Bowl (Nurgle)</li>
        <li class="indent">Blood Bowl (Skaven)</li>
        <li class="indent">Blood Bowl (Undead)</li>
        <li class="indent">BloodRayne</li>
    </ul>
</li>
<li><span>C</span>
    <ul class="letter-dropdown">
        <li class="indent">Cities Skylines (Livestream)</li>
    </ul>
</li>

2. 调整CSS样式

拆分隐藏和缩进功能，默认隐藏下拉容器，仅用indent处理文本缩进：

/* 默认隐藏字母对应的下拉列表 */
.letter-dropdown {
    display: none;
}
/* 子项目缩进 */
.indent {
    text-indent: 15px;
}
/* 可选：给字母span添加鼠标指针，提示可点击 */
li > span {
    cursor: pointer;
    font-weight: bold;
}

3. 修复JavaScript逻辑

点击字母时，直接找到对应的ul容器，切换它的显示状态，而非操作子li：

// 获取所有字母span元素
const allSpans = document.querySelectorAll('li > span');

allSpans.forEach(span => {
    span.addEventListener('click', function() {
        // 找到当前span的父li下的第一个ul（即对应的下拉列表）
        const dropdownList = this.parentElement.querySelector('.letter-dropdown');
        if (dropdownList) {
            // 切换显示状态
            dropdownList.style.display = dropdownList.style.display === 'none' || dropdownList.style.display === '' 
                ? 'block' 
                : 'none';
        }
    });
});

关键说明 #

• 使用querySelector和querySelectorAll替代旧的getElementsByTagName，更精准且符合现代JS规范。
• 直接控制父容器ul的显示状态，避免子元素操作无效的问题。
• 给字母span添加cursor: pointer提升用户体验，明确提示可点击。

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