jQuery 子元素不配合

Question

它应该如何工作：

在 div.user 上打开（切换 .show class）并显示 .userSub div.
如果我点击另一个 div.user，关闭（删除 .show class）并打开点击的 div.userSub
如果我点击已经.show-ed div.user（不是.userSub），它会关闭目标div.user。

几乎可以工作但是问题：

当.userSub div 是.show-ed 时，我只能单击关闭.userSub div，而不是.user div。但这将是目标。 :)

我已尝试消除该问题。可能 .user 选择错误，我应该在某处使用 stopPropagation()，或者我应该更具体地处理子元素，但我无法弄清楚。

let $active
$(document).ready(() => {
  $(".user").click(function(e) {
    if ($active != null) {
      $active.toggleClass("show")
    }
    $(e.target).children().toggleClass("show")
    $active = $(e.target).children()
  })
})

.user {
  background-color: gray;
  padding: 20px;
  margin: 5px;
}

.userSub {
  display: none;
  padding: 20px;
  background-color: lightgray;
  color: black;
  margin: 5px;
}

.show {
  display: block;
}

button {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
  name 1
  <div class="userSub">details 1<button>more 1</button></div>
</div>
<div class="user">
  name 2
  <div class="userSub">details 2<button>more 2</button></div>
</div>
<div class="user">
  name 3
  <div class="userSub">details 3<button>more 3</button></div>
</div>

Answer 1

为了实现您的目标，请检查单击的元素是否直接是 .user 元素，而不是它的子元素。为此，您可以使用事件的 target 属性。

另请注意，您可以通过仅将 .show class 应用于父级 .user 并让 CSS 规则应用 display: block 基于父元素上的 class 对子元素的规则。试试这个：

$(document).ready(() => {
  let $users = $(".user").click(function(e) {
    if (e.target !== this)
      return;
  
    $users.not(this).removeClass('show');
    $(this).toggleClass("show")
  })
})

.user {
  background-color: gray;
  padding: 20px;
  margin: 5px;
}

.userSub {
  display: none;
  padding: 20px;
  background-color: lightgray;
  color: black;
  margin: 5px;
}

.user.show .userSub {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="user">
  name 1
  <div class="userSub">details 1<button>more 1</button></div>
</div>
<div class="user">
  name 2
  <div class="userSub">details 2<button>more 2</button></div>
</div>
<div class="user">
  name 3
  <div class="userSub">details 3<button>more 3</button></div>
</div>

jQuery 子元素不配合

jQuery children elements are not cooperate

html

jquery

toggle