直接上代码
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
width: 220px;
height: 800px;
border: 1px solid #dddddd;
}
.item {
cursor: pointer;
}
.menu .header {
padding: 10px 5px;
background-color: goldenrod;
}
.menu .content a {
display: block;
padding: 5px;
border-bottom: 1px solid #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header" onclick="showMe(this)">EXAMPLE_ONE</div>
<div class="content hide">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
</div>
<div class="item">
<div class="header" onclick="showMe(this)">EXAMPLE_TWO</div>
<div class="content hide">
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
</div>
</div>
<div class="item">
<div class="header" onclick="showMe(this)">EXAMPLE_THREE</div>
<div class="content hide">
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
</div>
</div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
function showMe(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().find('.content').addClass('hide')
}
</script>
</body>
</html>
在浏览器里就能看到页面中的左边列表有显示和未显示
也可以通过jQuery来实现
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
width: 220px;
height: 800px;
border: 1px solid #dddddd;
}
.item {
cursor: pointer;
}
.menu .header {
padding: 10px 5px;
background-color: goldenrod;
}
.menu .content a {
display: block;
padding: 5px;
border-bottom: 1px solid #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header">EXAMPLE_ONE</div>
<div class="content hide">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
</div>
<div class="item">
<div class="header">EXAMPLE_TWO</div>
<div class="content hide">
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
</div>
</div>
<div class="item">
<div class="header">EXAMPLE_THREE</div>
<div class="content hide">
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
</div>
</div>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(".header").click(function() {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
点个赞再走呗~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
