如何在单击框之前保持下拉框内的内容不可见？

Question

简而言之，我想在我的网站上创建一个侧边栏，其中包含从 A 到 Z 按字母顺序排列的项目列表。我希望将这些项目放在 dropdox 框中，这样当您单击 A 时，所有以A 会出现在它下面。

我已经让下拉框工作得很好。问题是默认情况下所有列表项都是可见的。 和.

这是我试过的。

---

首先，本节的 HTML 代码如下所示。

<li><span>A</span>
</li>
<li><span>B</span>
    <ul>
        <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><span>C</span>
    <ul class="indent">
        <li class="indent">Cities Skylines (Livestream)</li>
    </ul>
</li>

基本上，我有一个项目列表，字母表中的每个字母作为一个跨度。现在我知道你在想什么了：class="indent" 到底是什么东西，为什么每一行都有它？好吧，这是数小时修改代码的结果。之所以称为缩进，是因为我当然想让每个项目都缩进，但我也认为我可以添加 on display: hidden 到该类并默认隐藏每个项目。那没有用。事后看来，我可能只需要添加一个包裹所有 li 的 div 并以这种方式使用缩进属性。

我改为在 ul 标签上使用类缩进。在我们继续之前，我应该注意到缩进的代码看起来像这样。

.indent {
    display: none;
    text-indent: 15px;
}

所以隐藏了项目，但基本上停止了使它们出现的脚本的工作。我想我也应该包括它。

var allSpan = document.getElementsByTagName('span');

for(var x = 0; x < allSpan.length; x++)
{
    allSpan[x].onclick=function()
    {
        if(this.parentNode)
        {
            var childList = this.parentNode.getElementsByTagName('li');
            for(var y = 0; y< childList.length;y++)
            {
                var currentState = childList[y].style.display;
                if(currentState=="none")
                {
                    childList[y].style.display="block";
                }
                else
                {
                    childList[y].style.display="none";
                }
            }
        }
    }
}

无论如何，然后我尝试在 li 标签周围创建一个 div，它做了与上面相同的事情。项目已隐藏，但脚本不再有效。

我几乎没有想法。我非常感谢这方面的帮助。

Answer 1

试试这个方法：

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

/////////////////////////////////////////////// //////////////////

var allSpan = document.getElementsByTagName('span');

for(var x = 0; x < allSpan.length; x++)
{
    allSpan[x].onclick=function(e)
    {

        if(this.parentNode)
        {

            var childList = e.currentTarget.children;

            for(var y = 0; y< childList.length;y++)
            {
                var currentState = childList[y].style.display;
                if(currentState=="none")
                {
                    childList[y].style.display="block";
                }
                else
                {
                    childList[y].style.display="none";
                }
            }
        }
    }
}

///////////////////////////////////////

.indent {
    display: none;
    text-indent: 15px;
}