UL LI click正在隐藏UL。
UL LI click正在隐藏UL。
提问于 2015-12-30 19:49:41
我试图创建一个UL LI列表，以便当单击单词" list“时，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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-12-30 19:59:00
正如上面所指出的，您不能就这样将文本粘在ul中。ul应该只包含li元素。一种更清晰的方法是这样的，它显示和隐藏ul元素，而不是它内部的所有li，在ul外部有一个控件。
另外，正如下面所指出的，有一种更好的方法来处理所有这些，以确保您没有处理页面上的每个ul。通过使用类选择器和内置的jquery函数。
小提琴：https://jsfiddle.net/erjfghf0/
HTML：
<a class="showHideLink">List</a>
<ul class="showHideList">
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>联署材料：
$('.showHideLink').click(
function (event) {
$(this).next('.showHideList').toggle();
}
);CSS：
ul {
display: none;
}Stack Overflow用户
发布于 2015-12-30 20:09:20
由于UL没有任何要呈现的东西，因为所有的LI都隐藏了，所以您需要在其他事情上呈现事件操作。以下是我的建议：https://jsfiddle.net/Twisty/LL948r6f/
List (<a href="#" id='toggleLink'>Toggle</a>)
<ul>
<li>1234</li>
<li>5678</li>
<li>0123</li>
</ul>CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
ul li {
display: none;
}
ul li:before {
content: "- ";
}JQuery
$(function() {
$('#toggleLink, ul').click(function() {
console.log("List Items display: " + $('ul li').css('display'));
if ($('ul li').css('display') == 'none') {
$('ul li').show();
} else {
$('ul li').hide();
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34536250
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号