javascript - 当父元素当前使用 jQuery 处于事件状态时无法隐藏元素

Question

我已经创建了一个迷你标签过滤器过滤器。我遇到的问题是，每当我在当前选项卡上时，所有选项卡上的“更多”都会消失。我不希望它在页面首次加载时显示，因为我想显示第一个选项卡的内容。同样出于某种原因，在页面首次加载时未应用“current”类。谢谢!

$(document).ready(function() {

  $('.tab').click(function() {
    var tabID = $(this).data('tabid');

    $('.iconsContainer').children().removeClass('current');
    $(this).addClass('current');

    //hide "more" when you are currently on that tab
    $('.iconContainerMore').addClass('hideMoreText');

    $('.tripctychContent-container').children().hide();

    $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").show();
  });

});

.field--name-field-topic-2-content,
.field--name-field-topic-3-content {
  display: none;
}

.hideMoreText {
  display: none;
}

.tab {
  cursor: pointer;
}

.iconsContainer {
  display: flex;
  justify-content: space-between;
}

.tab p:first-of-type:hover {
  background: black;
}

.tab p:first-of-type {
  padding: 30px;
  background: blue;
  color: white;
}

.current p:first-of-type {
  background: black !important;
}

.tripctychContent-container p {
  background: red;
  color: white;
}

p {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
  <a class="tab" data-tabid="topic1">
    <div>
      <p>Topic 1 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic2">
    <div>
      <p>Topic 2 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic3">
    <div>
      <p>Topic 3 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
</div>

<div class="tripctychContent-container">
  <div class="field--name-field-topic-1-content" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>

Answer 1

尝试使用 closest() 获取点击时的元素。

$('.tab').click(function() {

  $('.iconContainerMore').removeClass('hideMoreText');
  $('.tab.current').removeClass('current');
  $(this).addClass('current').find('.iconContainerMore').addClass('hideMoreText');

  var tabID = $(this).data('tabid');
  $('.tripctychContent-container div').addClass('hideMoreText');
  $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").removeClass('hideMoreText');

});

.hideMoreText {
  display: none;
}

.tab {
  cursor: pointer;
}

.iconsContainer {
  display: flex;
  justify-content: space-between;
}

.tab p:first-of-type:hover {
  background: black;
}

.tab p:first-of-type {
  padding: 30px;
  background: blue;
  color: white;
}

.current p:first-of-type {
  background: black !important;
}

.tripctychContent-container p {
  background: red;
  color: white;
}

p {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
  <a class="tab current" data-tabid="topic1">
    <div>
      <p>Topic 1 title</p>
      <p class="iconContainerMore hideMoreText">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic2">
    <div>
      <p>Topic 2 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic3">
    <div>
      <p>Topic 3 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
</div>

<div class="tripctychContent-container">
  <div class="field--name-field-topic-1-content" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content hideMoreText" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content hideMoreText" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>