toyboy__37,
мда ...
Закрытие блока по нажатию в любом месте
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active-menu-item{background: #FF00FF;}
div.slider-content{display:none; width:600px;height:200px;}
.slider-content:nth-child(2){background-color: green}
.slider-content:nth-child(3){background-color: pink}
.slider-content:nth-child(4){background-color: blue}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $but = $(".slider-btn"),
$blocks = $(".slider-content");
$but.each(function(i, elem) {
var $el = $(elem);
$el.click(function() {
$but.not($el).removeClass("active-menu-item");
$el.toggleClass("active-menu-item");
$blocks.each(function(j, el) {
$(el)["slide" + (i == j ? "Toggle" : "Up")]();
});
})
});
$('html').click(function (event) {
if ($(event.target).closest('.slider-btn, .slider-content' ).length) return;
$but.filter('.active-menu-item').click()
});
});
</script>
</head>
<body>
<div class="section">
<div>
<div>
<button class="slider-btn">btn1</button>
<div>
<button class="slider-btn">btn2</button>
<button class="slider-btn">btn3</button>
</div>
</div>
</div>
<div class="slider-content">slider content1</div>
<div class="slider-content">slider content2</div>
<div class="slider-content">slider content3</div>
</div>
</body>
</html>