Выберите весь div, кроме некоторых детей с jquery

Question

Я хочу открыть боковую панель, когда нажимаю на это поле, но когда я нажимаю на кнопки, я не хочу открывать боковую панель, это мой пример кода.

<div class="kanban-level-card js-details">
  <p>Antivirus</p>
  <div class="btn-group">
    <div class="dropdown-menu">
      <button>Delete</button>
      <button>close opportunity</button>
    </div>
  </div>
</div>


$(document).on("click", ".js-details", function(e) {
  if (!$(e.target).is(".btn-group")) {
    $(".sidebar").addClass("visible");
  }
});

https://codepen.io/MahsaKiarad/pen/xjrpzx?editors=0110

Answer 1

Просто замените

if (!$(e.target).is(".btn-group")) {

с

if (e.target === this) {

$(document).on("click", ".js-details", function(e) {
  if (e.target === this) {
    $(".sidebar").addClass("visible");
  }
});

$(".js-close").click(function() {
  $(".sidebar").removeClass("visible");
});

.kanban-level-card {
  padding: 10px;
  margin-top: 10px;
  background-color: #eee;
  border: 3px solid green;
  color: green;
  width: 300px;
  cursor: pointer;
}


/* sidebar */

.sidebar {
  width: 400px;
  height: 100vh;
  background-color: #eee;
  box-shadow: -1px -2px 38px -3px rgba(133, 131, 133, 1);
  position: fixed;
  top: 0;
  right: -453px;
  z-index: 1000;
}

.sidebar.visible {
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- card -->

<div class="kanban-level-card js-details">
  <p>Antivirus</p>
  <div class="btn-group">
    <div class="dropdown-menu">
      <button>Delete</button>
      <button>close opportunity</button>
    </div>
  </div>
</div>

<!-- sidebar -->
<div class="sidebar js-sidebar">
  <button class="js-close">close</button>
</div>