jQuery切换类无法正常工作 [英] jQuery toggle class not working correctly

问题描述

我创建了一个简单的标签过滤器，但无法使其正常工作.当页面第一次重新加载时，我希望隐藏选项卡内容，并且希望在所有选项卡上显示更多"，到目前为止，这是可行的.当您单击更多"时，应显示选项卡内容，而该当前选项卡的更多"应被隐藏.我还需要切换选项卡，所以我再次单击选项卡时，它应该隐藏选项卡内容并显示更多".现在，我遇到的问题是，当您单击某个选项卡时，其他选项卡的选项卡内容会显示，但不会显示该选项卡的内容，并且除非您单击另一个选项卡，否则不会显示更多".谢谢！！

I created a simple tab filter, but I can't get it to work correctly. When the page first reloads i want the tab content to be hidden and I want the "more" to show on all the tabs, so far that's working. When you click on "more" the tab content should display, and "more" for that current tab should be hidden. I also need the tabs to toggle so i you click the tab again it should hide the tab content and show "more". Right now that issues that i'm having are that when you click on a tab the tab content of the other tabs show, but not the content of that tab, and also "more" doesn't show unless you click on another tab. Thanks!!

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
    
        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');
    
        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');
      
    
        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
      });
      
  });

.hideText{
  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: 15px 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 hideText" data-blockid="topic1">
          <p>Topic 1 body</p>
        </div>
        <div class="field--name-field-topic-2-content hideText" data-blockid="topic2">
          <p>Topic 2 body</p>
        </div>
        <div class="field--name-field-topic-3-content hideText" data-blockid="topic3">
          <p>Topic 3 body</p>
        </div>
      </div>

推荐答案

最后，您的JS函数发生了一些变化.

A little change in your JS function in the end.

$(document).ready(function () {

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

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

        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');

        $('.field-class').hide()
        $("[data-blockid=" + tabID + "]").show();

      });      
  });

并为所有标签内容分配了一个通用类

And have assigned a common class to all the tab content

<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-class hideText" data-blockid="topic1">
      <p>Topic 1 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic2">
      <p>Topic 2 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic3">
      <p>Topic 3 body</p>
    </div>
  </div>

希望这会有所帮助！

这篇关于jQuery切换类无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！