实现代码如下：
<!-- jquery实现左侧折叠菜单 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width:200px;
height:500px;
border:1px solid red;
}
.header{
background-color:blue;
}
.content{
min-height:50px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div id="container">
<div class="item">
<div class="header">菜单1</div>
<div class="content">内容1</div>
</div>
<div class="item">
<div class="header">菜单2</div>
<div class="content hide">内容2</div>
</div>
<div class="item">
<div class="header">菜单3</div>
<div class="content hide">内容3</div>
</div>
<div class="item">
<div class="header">菜单4</div>
<div class="content hide">内容4</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.header‘).click(function(){
//方式一 全局视图
// $(‘.content‘).addClass(‘hide‘); //给所有content添加hide
// $(this).next().removeClass(‘hide‘); //给点击对象移除hide
//方式二 局部视图
//筛选器的方法next(),prev(),children(),parent(),find(),siblings()
// $(this).next().removeClass(‘hide‘);
// $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘);
//方式三 局部视图+链式编程
$(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘);
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/ericbai/p/9301875.html
时间： 2024-08-07 05:30:59