left menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content-left{
background-color: grey;
width:250px;
border: 1px solid grey;
}
.content-left .items .content ul{
list-style: none;
margin:0;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class='content-left'>
<div class='items'>
<div class='header'>标题一</div>
<div class='content'>
<ul>
<li>content1</li>
<li>content1</li>
<li>content1</li>
</ul>
</div>
</div>
<div class='items'>
<div class='header'>标题二</div>
<div class='content hide'>
<ul>
<li>content21</li>
<li>content22</li>
<li>content23</li>
</ul>
</div>
</div>
<div class='items'>
<div class='header'>标题三</div>
<div class='content hide'>
<ul>
<li>content31</li>
<li>content32</li>
<li>content33</li>
</ul>
</div>
</div>
</div>
<script src='jquery-2.1.4.min.js'></script>
<script>
$('.header').click(function(){
$(this).siblings().removeClass('hide').parent().siblings().children('.content').addClass('hide');
//$(this).parent().siblings().children('.content').addClass('hide');
})
</script>
</body>
</html>
