jquery закрыть контейнер, если щелкнуть что-либо, кроме контейнера и кнопки - PullRequest
Новая
       0

jquery закрыть контейнер, если щелкнуть что-либо, кроме контейнера и кнопки

0 голосов
/ 05 апреля 2020

У меня есть кнопка и группа, при нажатии кнопки группа должна показывать, когда что-либо, кроме группы, нажатие группы должно закрываться. Мой код ниже не работает 

<body>
    <div id="btn" class="control">
    <div id="group" class"control">
</body>

      $("#btn").click(function(){
        $("#group").toggle();
      });

$("body").click(function(evt){    
    if(!$(evt.target).is(".control")) {
        $("#group").hide();
    }

Я не могу поставить цель как #group, так как это отменяет переключение при нажатии кнопки.

Использование кода выше группы показывает, когда кнопка щелкается, но скрывается при нажатии чего-либо на экране, в том числе при нажатии кнопки и группы.

Как мне заставить jquery работать как положено?

Спасибо

Ответы [ 2 ]

2 голосов
/ 05 апреля 2020

Попробуйте этот код, пожалуйста: 

$(document).on('click', function(e) {
  var target = $(e.target);
  if (target.is('#btn')) {
    $(".group").toggleClass('hide');
  } else if (target.is('#group')) {
    if ($(".group").hasClass('hide')) {
      $(".group").removeClass('hide');
    }
  } else {
    $(".group").addClass('hide');
  }
})
#btn {
  width: 100px;
}

.group {
  width: 100px;
  height: 100px;
  background-color: red;
  display: block;
}

.group.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" class="control">Click me</button>
<div id="group" class="group hide"></div>
0 голосов
/ 05 апреля 2020

Если я вас хорошо понял, это то, что вам нужно? Вы можете сделать это без контроля класса, просто с двумя идентификаторами. Это выдаст ошибку, но это именно то, что мы хотим. Код делает как требуется. jQuery .n oop () 

$("#group").click(function(){
 $("#group").noop();
});
$("#btn").click(function(){
 $("#group").toggle();
});
$("div").not("#btn").click(function(){    
   $("#group").css("display", "none")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>EVERYTHING ELSE 
EVERYTHING ELSE </br>
EVERYTHING ELSE 
EVERYTHING ELSE </br>
EVERYTHING ELSE 
EVERYTHING ELSE</br>
EVERYTHING ELSE EVERYTHING ELSE
</div>
    <div id="btn">-----btn----</div>
    <div id="group"  style="display:none">-----group----</div>
 <div>
EVERYTHING ELSE
EVERYTHING ELSE</br>
EVERYTHING ELSE
EVERYTHING ELSE</br>
EVERYTHING ELSE EVERYTHING ELSE
 </div>   
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...