Есть 2 кнопки: Вывод поиска и Вывод категорий и при кликах по ним по отдельности все работает и показываются блоки поиска и категорий и убираются при клике вне этих блоков но если допустим нажать кнопку поиска появится блок поиска и нажать кнопку категорий то блок поиска исчезнет и появиться блок категорий и на этом все перестает работать и блок категорий уже не убирается.Как бы это исправить?
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('div[id^="b"]').click(function(){
var $isk = $('.isk');
var $cat = $('.cat-all');
if(this.id=='b1'){
var $v=$isk;
}else if(this.id=='b2'){
var $v=$cat;
}
if ($v.css('display') != 'block'){$v.slideDown('slow');var click = true;
$(document).bind('click.myEvent', function(b){
if (!click && $(b.target).closest($v).length == 0) {
$v.slideUp('slow');
$(document).unbind('click.myEvent');
}
click = false;
});
}
});
});
</script>
</head>
<body>
<div style="width:500px;height:20px">
<div id="b1" style="display:inline-block;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:aqua">ПОИСК</div>
<div id="b2" style="margin-right:200px;width:100px;height:20px;border:1px solid #000;text-align:center;background-color:green;float:left">КАТЕГОРИИ</div>
</div>
<div class="cat-all" style="width:150px;display:none;text-align:center; height: 50px;position:absolute;margin:150px 0 0 20px;background-color: deeppink;">блок категорий</div>
<div class="isk" style="display:none;width:150px;text-align:center; height: 50px;position:absolute;margin:150px 0 0 350px;background-color:teal;">блок поиска</div>
</body>
</html>
