Question

我是Javascript的新手，我正在试图找出为什么.nextElementSibling没有抓住listHere的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部分可以工作一次，但后来为任何其他嵌套列表提供了一个空值。非常感谢任何帮助，谢谢。

Answer 1

您在null上获得了this.nextElementSibling，因为没有下一个兄弟会成为element！

<li><span>[+]</span> Gift of Bolt</li>
如果你看这一行，你会发现你已经关闭了<li>标签，因此没有<span>的兄弟，你得到一个空。要解决此问题，只需将<ul>旁边的<li>包裹在<li>...</li>内。

在JSFiddle

上查看此解决方案

为什么我收到this.nextElementSibling的空值？

1 个答案: