I am making a web app that will have a "my files" area and to do so I am writing my own html and jQuery to control the opening and closing of each folder (or ul li). I want to make sure that this web app is as efficient as I can make it as it may have to deal with a large amount of hierarchy.
Can anyone suggest a way that my Jquery could be more efficient? Many thanks
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
li {
cursor: pointer;
line-height: 20px;
list-style: none;
}
li ul {
display: none;
}
.active {
}
</style>
</head>
<body>
<div class="tree-wrapper">
<ul class="tree">
<li>
<a href="#">Animals</a>
<ul>
<li>
<a href="#">Birds</a>
</li>
<li>
<a href="#">Mammals</a>
<ul>
<li>Elephant</li>
<li>Mouse</li>
</ul>
</li>
<li>
<a href="#">Reptiles</a>
</li>
</ul>
</li>
<li><a href="#">Plants
<ul>
<li>
<a href="#">Flowers</a>
<ul>
<li><a href="#">Rose</a></li>
<li><a href="#">Tulip</a></li>
</ul>
</li>
<li><a href="#">Trees</a></li>
</ul>
</a>
</li>
</ul>
</div>
<script>
var folderToggle = $(".tree li > a");
$(function () {
folderToggle.click(function(e) {
e.preventDefault();
$(this).find("+ ul").toggle("slow");
$(this).toggleClass("active");
});
});
</script>
</body>
</html>
JSFIDDLE
