实现代码如下：
<!-- 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>jquery实现左侧折叠菜单
原文地址：https://www.cnblogs.com/ericbai/p/9301875.html