HTML页面使用ul、li标签和jQuery实现ul折叠
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
ul {
list-style: none;
}
.title {
text-align: center;
margin: 0;
}
li p {
margin: 0;
}
#Bigdiv {
background-color: aquamarine;
height: 100px;
display: flex;
width: 100%;
height: 100%;
}
#Leftdiv {
flex: 3;
background-color: cadetblue;
}
#Rightdiv {
flex: 5;
background-color: darkseagreen;
}
ul li ul {
display: none;
}
.zk {
display: block;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div id="Bigdiv">
<div id="Leftdiv">
<p class="title">左边</p>
<ul style="padding: 0 0 0 10px;">
<li>
<p>第一项---01</p>
<!-- class="zk" -->
<ul>
<li>
<p>第一项子节点---02</p>
<ul>
<li>
<p>第一项子节点---03</p>
<ul>
<li>第一项子节点-1</li>
<li>第一项子节点-2</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>
<p>第一项子节点-2</p>
<ul>
<li>
<p>第一项子节点-1</p>
<ul>
<li>第一项子节点-1</li>
<li>第一项子节点-2</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>第一项子节点-2</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>
<p>第一项子节点-2</p>
<ul>
<li>第一项子节点-1</li>
<li>第一项子节点-2</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>第一项子节点-3</li>
<li>第一项子节点-4</li>
<li>第一项子节点-5</li>
</ul>
</li>
<li>
<p>第二项</p>
<ul>
<li>第二项子节点-1</li>
<li>第二项子节点-2</li>
<li>第二项子节点-3</li>
<li>第二项子节点-4</li>
<li>第二项子节点-5</li>
</ul>
</li>
<li>
<p>第三项</p>
<ul>
<li>第三项子节点-1</li>
<li>第三项子节点-2</li>
<li>第三项子节点-3</li>
<li>第三项子节点-4</li>
<li>第三项子节点-5</li>
</ul>
</li>
<li>
<p>第四项</p>
</li>
</ul>
</div>
<div id="Rightdiv">
<p class="title">右边</p>
<div id="content" style="background-color:rgb(42, 114, 248); height: 50%;">adsf</div>
</div>
</div>
<script>
$("li").click(function (event) {
// 先得到当前li对象的子节点ul
obj = $(this).children("ul")
// 有则进入if
if (!obj.hasClass("zk")) {
// 获得当前对象的兄弟对象
siblings = $(this).siblings().children("ul")
if (siblings.hasClass("zk")) {
siblings.removeClass("zk")
}
$(obj).addClass("zk")
} else {
$(obj).removeClass("zk")
}
// 阻止事件冒泡到DOM树上
event.stopPropagation();
});
$("li").click((event) => {
$("#content")[0].innerHTML = event.target.textContent
// $.ajax({
// url: "http://localhost:63821/AdminsLogin/json",
// method: "get",
// success(data) {
// console.log(data);
// $("#content")[0].textContent =data[]
// }
// });
// console.log(htmlobj);
event.stopPropagation();
})
</script>
</body>
</html>
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
