gpt4 book ai didi

javascript - nextSibling ul li ul

转载 作者:行者123 更新时间:2023-11-30 18:20:22 26 4
gpt4 key购买 nike

我不确定但如果我理解正确 js nextSibling 关注下一个节点?那么,当我想在 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';
}

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

最佳答案

正如@andreas 所指出的,您的 HTML 结构无效,因为您不能将 UL 作为 UL 的子级。但是您可以将 UL 作为 LI 的子代。所以请考虑以这种方式更新您的 HTML。来自先前类似答案的辅助函数“Next()”Hide an element's next sibling with Javascript用于查找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>

关于javascript - nextSibling ul li ul,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12196764/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com