Daniel Defo,
плагин может сделать тоже самое что строки 18 -23
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li.selected{
color: #FF0000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(window).load(function() {
$(document).on('click', function(event) {
if (!$('#nav').has(event.target).length) {
$("#nav .selected div div").slideUp(100);
$("#nav .selected").removeClass("selected");
}
});
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#"><i class="glyphicon glyphicon-wrench"></i> Услуги</a>
<div class="subs">
<div>
<ul>
<li><h3>Submenu #1</h3>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
test click close
</body>
</html>