<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
ul {
display: block;
margin-left: 20px;
padding: 0px;
list-style: none;
width:200px;
background-color:cadetblue;
overflow:hidden;
}
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
width:200px;
background-color:aqua;
}
</style>
</head>
<body style="background: rgb(240, 249, 253);">
<script type="text/javascript">
$(document).ready(function () {
$("li").click(function (e) {
var $target = $(this);
//console.log($target.html());
if ($target.next("ul").is(":hidden")) {
$("ul").not("#root").hide();
$target.next("ul").show();
$target.addClass("active");
$target.siblings().removeClass("active");
}
else {
$target.next("ul").hide();
}
});
});
</script>
<ul id="root">
<li>1</li>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<li>2</li>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<li>3</li>
<ul>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>
</ul>
</body>
</html>
