文章/答案/技术大牛

发布

问nextSibling ul li ul
EN

Stack Overflow用户

提问于 2012-08-30 20:23:15

回答 2查看 1.7K关注 0票数 1

我不确定，但是如果我理解正确的话，js nextSibling focus next node？那么，当我想在li中选择ul时，为什么我会遇到麻烦呢？

    <ul>
<li><input id="btn-page" type=button onclick="displayMenu();" /></li>
    <ul class="hide">
        <li>Some text</li>
    </ul>
    <li>...</li>
   </ul>

和我的js函数：

    function displayMenu() {
   var idMenu = event.target.id;
   var ulDisplay = document.getElementById(idMenu).nextSibling;
   ulDisplay.style.display = 'block';
}

我想我忘了什么，但我不知道为什么。感谢您的帮助:)

javascript

nextsibling

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-30 20:53:47

正如@andreas指出的那样，你的HTML的结构是无效的，因为你不能有一个UL作为UL的子级。但你可以有一个UL作为李的孩子。因此，请考虑以这种方式更新HTML。上一个类似答案Hide an element's next sibling with Javascript中的辅助函数"Next()“用于查找UL

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .hide { display: none; }
        </style>
        <title>Title</title>
        <script type="text/javascript">
            function next(elem) {
                do {
                    elem = elem.nextSibling;
                } while (elem && elem.nodeType != 1);
                return elem;                
            }

            function displayMenu(id) {
                var ulDisplay = next(document.getElementById(id));
                ulDisplay.style.display = 'block';
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <input id="btn-page" value="show" type=button onclick="displayMenu(this.id);" />
                <ul class="hide"><li>Some text</li></ul>
            </li>
            <li>...</li>
        </ul>
    </body>
</html>

票数 2

Stack Overflow用户

发布于 2012-08-30 20:32:48

这种方式似乎更好。

HTML

<ul>
 <li>
  <input id="btn1" type='button' onclick="displayMenu(event);" />
 </li>
 <li><ul id="page1" style="display: none" class="hide">
  <li>Some text</li>
 </ul></li>
 <li>...</li>
</ul> <

function displayMenu(event) {
    var id = event.target.id.substring(3);
    var ulDisplay = document.getElementById("page" + id);
    ulDisplay.style.display = "block";
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12196764

复制

相似问题

问nextSibling ul li ul
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问nextSibling ul li ulEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问nextSibling ul li ul
EN