为什么我会收到这个的空值.nextElementSibling

Question

我是Javascript的新手，我试图弄清楚为什么.nextElementSibling没有抓取列表中的下一个元素这是我的HTML结构：

<div class="container">
    <div id="User1" class="area-left">
        <h1>User 1: Sylvr</h1><br>
    </div>
    <div id="ItemTree" class="area-center">
        <h1>Bolt: Item Tree</h1><br>
        <ul class="col_ul">
            <li><span>[+]</span> Bolt
                <ul>
                    <li>Zap</li>
                    <li><span>[+]</span> Gift of Bolt</li>
                        <ul>
                            <li>Icy Runestone</li>
                            <li>Superior Sigil of Air</li>
                            <li><span>[+]</span> Gift of Metal</li>
                            <li><span>[+]</span> Gift of Lightning</li>
                        </ul>
                    <li><span>[+]</span> Gift of Mastery</li>
                    <li><span>[+]</span> Gift of Fortune</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="User2" class="area-right">
        <h1>User 2: Gylen</h1><br>
    </div>
</div>
<div id="GuildBank" class="container-bottom">
    <h1></h1>
</div>

这是我正在使用的脚本：

<script>
    window.onload = function  () {
    var li_ul = document.querySelectorAll(".col_ul li ul");
    for (var i = 0; i < li_ul.length; i++) {
        li_ul[i].style.display = "none"
    };
    var exp_li = document.querySelectorAll(".col_ul li > span");
    for (var i = 0; i < exp_li.length; i++) {
        exp_li[i].style.cursor = "pointer";
        exp_li[i].onclick = showul;
    };
    function showul () {
        nextul = this.nextElementSibling;
        if(nextul.style.display == "block")
            nextul.style.display = "none";
        else
            nextul.style.display = "block";
    }}
</script>

出于某种原因，this.nextElementSibling部分工作一次，但随后为任何其他嵌套列表提供了一个 null 值。任何帮助将不胜感激，谢谢。

Answer 1

你在this.nextElementSibling上得到了null，因为没有下一个兄弟姐妹是element！

<li><span>[+]</span> Gift of Bolt</li>如果您查看此行，您会发现您已经关闭了<li>标签，因此<span>没有同级，并且您得到一个 null。要解决此问题，只需将<ul>包裹在<li>...</li>内<li>旁边即可。

在 JSFiddle 上检查此解决方案