@leshiy555

Поочередно при кликах на разные кнопки скрывались их div?

Есть 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>
  • Вопрос задан
  • 182 просмотра
Решения вопроса 1
AngReload
@AngReload
Кратко о себе
Я бы заменил весь ваш js-код на это:
var rels = {
  'b1': '.isk',
  'b2': '.cat-all'
};
$(document).ready(function () {
  $('div[id^="b"]').click(function () {
    $(rels[this.id]).toggle('slow');
  })
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@leshiy555 Автор вопроса
Нет мне нужно что бы блоки не просто выводились и убирались только при нажатии на соответствующие кнопки.
Мне нужно что бы если выведен блок поиска и при клике и в любом месте страницы (кроме самого блока) и при клике на кнопку категорий и поиска блок поиска убирался бы а блок категорий выводился бы и так же наоборот.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы