jQuery Toggle类问题

Question

有两个按钮应切换类以显示或隐藏两个Divs。仅应同时开放一个DIV。如果一个DIV打开并单击第二个按钮，则打开一个按钮应在另一个按钮打开之前关闭。我做错了什么，请有人可以帮我吗？

$('.clicker').click(function() {
    $('.shop_container').find('.wrapper');
    $('.wrapper').toggleClass('show');
    $('.shop_container').find('.wrapper.show').removeClass('show');
});

.wrapper {
  width: 100vw;
  left: -100vw;
  height: 100vh;
  position: fixed !important;
  top: 0px;
  z-index: 99999;
  background: #ff0000;
  transition: all 0.4s ease-in-out;
  overflow-y: scroll;
  overflow-x: hidden;
}

.wrapper.show {
  left: 0px;
  background-color: var(--blue);
  transition: all 0.4s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="shop_container">
  <div class="clicker">
  First
  </div>
  <div class="clicker">
  Second
  </div>
  <div class="wrapper first">
  Content first
  </div>
  <div class="wrapper second">
  Content second
  </div>
</div>

Answer 1

您的代码：

$('.clicker').click(function() {
    $('.shop_container').find('.wrapper');  // => no action, no effect
    $('.wrapper').toggleClass('show'); // => get all elements whose class is `wrapper` , add class `show` to those elements (both elements are added)
    $('.shop_container').find('.wrapper.show').removeClass('show'); // then remove the `show` class on elements whose class is `show` and `wrapper`
});

结果，您将show类添加到具有类包装器的所有DIV标签，然后再次删除它们。

您可以使用数据集与：

$('.clicker').click(function() {
  let content = $(this).data('content')
  $('.wrapper.' + content).toggleClass('show').siblings('.wrapper').removeClass('show')
});

.wrapper {
  width: 10vw;
  height: 10vh;
  border: solid 1px #ccc;
  margin: 5px;
  display: none;
}

.wrapper.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="shop_container">
  <button class="clicker" data-content='first-content'>
  First
  </button>
  <button class="clicker" data-content='second-content'>
  Second
  </button>
  <div class="wrapper first-content">
    Content first
  </div>
  <div class="wrapper second-content">
    Content second
  </div>
</div>