gpt4 book ai didi

javascript - UL LI 单击隐藏 UL

转载 作者:行者123 更新时间:2023-11-28 18:50:36 32 4
gpt4 key购买 nike

我正在尝试制作一个 UL LI 列表,这样当单击“LIST”一词时,将显示 LI 元素,反之亦然。但是,如果单击 LI,整个列表将再次隐藏。我希望做到这样,如果单击 LI,它就不会隐藏我的列表,因为我想稍后为 LI 单击添加功能。

这是有问题的代码:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
ul li {
display: none;
}
ul li:before{ content:"- ";}
</style>

<script type="text/javascript">

window.onload = function() {

$('ul').click(function(){

if ($('ul > li').css('display') == 'none') {

$('ul > li').show();

}
else {
$('ul > li').hide()

}

});

}
</script>

</head>

<body>

<ul>
List
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>


</body>

</html>

最佳答案

正如上面所指出的,您不能像这样将文本粘贴在 ul 中。 ul 中应该只包含 li 元素。更简洁的方法是这样的,它使用 ul 外部的控件显示和隐藏 ul 元素,而不是其中的所有 li 元素。 .

此外,正如下面指出的,有一种更好的方法来处理这一切,以确保您不会处理页面上的每个 ul。通过使用类选择器和内置的 jquery 函数。

fiddle :https://jsfiddle.net/erjfghf0/

HTML:

<a class="showHideLink">List</a>
<ul class="showHideList">
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>

JS:

$('.showHideLink').click(
function (event) {
$(this).next('.showHideList').toggle();
}
);

CSS:

ul {
display: none;
}

关于javascript - UL LI 单击隐藏 UL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34536250/

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