javascript - 如何在 Accordion 中切换类 "active"

Question

我试图让我的 Accordion 的行为如下图所示，但我不知道如何使用 jquery 代码切换“事件”类。

第一个元素(“在线现金返还”)以“事件”开始，但我想在单击另一个元素时删除其类。

该图像非常清楚地解释了我想要的预期行为。

我的代码:

$('.menu').on('click', function() {
  $('.content').hide();
  $(this).find('.content').show();
});


$('.menu').on('click', function(event) {
  $target = $(event.target);
  $target.addClass('active');
});

.sectionThree-container>ul {
  list-style: none;
}

.sectionThree-container>ul p {
  display: none;
}

.sectionThreeOptions>h2 {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  color: #4F4F4F;
  margin-left: 22px;
  cursor: pointer;
}

.sectionThreeOptions>h2.active {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 22px;
  color: #222222;
  margin-left: 0;
}

.sectionThree-container .circle {
  width: 32px;
  height: 32px;
  left: 142px;
  top: 2050px;
  background: #FF6B7D;
  color: #fff;
  border-radius: 50%;
  margin: 20px 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.sectionThree-container .circle.active {
  width: 60px;
  height: 60px;
  left: 128px;
  top: 1820px;
  background: #EF1247;
  margin-left: -10px;
}

.sectionThree-container>ul>li>p.active {
  margin-bottom: 60px;
}

.sectionThreeOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionThree-container">
  <ul>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle active">1</div>
        <h2 class="active">cashback online</h2>
      </div>
      <p class="content" style="display: inline">
        Ofereça cashback a seus clientes em nossos </br>
        mais de 300 e-commerces parceiros através de </br>
        uma plataforma personalizável
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">2</div>
        <h2>cashback offline</h2>
      </div>
      <p class="content">
        Ofereça cashback em lojas físicas parceiras </br>
        ou em sua própria rede e produtos através de uma </br>
        experiência online e offline
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">3</div>
        <h2>recompensas</h2>
      </div>
      <p class="content">
        Tenha sua própria plataforma de recompensas,</br>
        permitindo que seus usuários acumulem e </br>
        troquem pontos em mais de 50 parceiros
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">4</div>
        <h2>gamificação</h2>
      </div>
      <p class="content">
        Torne a experiência ainda mais imersiva com </br>
        mecânicas de gamificação na sua plataforma </br>
        de fidelização personalizada
      </p>
    </li>
  </ul>

  <div class="sectionThreeOptionsImage">
    <img src="images/imagemUm.png" id="sectionThreeImage" alt="">
  </div>
</div>
</div>

Answer 1

您可以使用单个函数来完成您需要的所有操作，不需要两个监听器。

在监听器/函数内，使用 jQuery 从 div.sectionThree-container 中选择具有类 active 的所有子级，并删除此类。
现在，由于您位于单击的 .menu 内，因此 this 上下文引用您想要的单击菜单，因此只需找到其“.content”并显示它，找到 h2 并添加“active”类，找到圆圈并向其添加“active”类。

看下面，这是你需要的吗？

$('.menu').on('click', function() {
  $(".sectionThree-container .active").removeClass("active")
  $('.sectionThree-container .content').hide();
  let clickedContent = $(this);
  clickedContent.find('.content').show();
  clickedContent.find('h2').addClass('active');
  clickedContent.find('.circle').addClass('active');
});

.sectionThree-container>ul {
  list-style: none;
}

.sectionThree-container>ul p {
  display: none;
}

.sectionThreeOptions>h2 {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 22px;
  line-height: 22px;
  color: #4F4F4F;
  margin-left: 22px;
  cursor: pointer;
}

.sectionThreeOptions>h2.active {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 22px;
  color: #222222;
  margin-left: 0;
}

.sectionThree-container .circle {
  width: 32px;
  height: 32px;
  left: 142px;
  top: 2050px;
  background: #FF6B7D;
  color: #fff;
  border-radius: 50%;
  margin: 20px 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}

.sectionThree-container .circle.active {
  width: 60px;
  height: 60px;
  left: 128px;
  top: 1820px;
  background: #EF1247;
  margin-left: -10px;
}

.sectionThree-container>ul>li>p.active {
  margin-bottom: 60px;
}

.sectionThreeOptions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionThree-container">
  <ul>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle active">1</div>
        <h2 class="active">cashback online</h2>
      </div>
      <p class="content" style="display: inline">
        Ofereça cashback a seus clientes em nossos </br>
        mais de 300 e-commerces parceiros através de </br>
        uma plataforma personalizável
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">2</div>
        <h2>cashback offline</h2>
      </div>
      <p class="content">
        Ofereça cashback em lojas físicas parceiras </br>
        ou em sua própria rede e produtos através de uma </br>
        experiência online e offline
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">3</div>
        <h2>recompensas</h2>
      </div>
      <p class="content">
        Tenha sua própria plataforma de recompensas,</br>
        permitindo que seus usuários acumulem e </br>
        troquem pontos em mais de 50 parceiros
      </p>
    </li>
    <li class="menu">
      <div class="sectionThreeOptions">
        <div class="circle">4</div>
        <h2>gamificação</h2>
      </div>
      <p class="content">
        Torne a experiência ainda mais imersiva com </br>
        mecânicas de gamificação na sua plataforma </br>
        de fidelização personalizada
      </p>
    </li>
  </ul>

  <div class="sectionThreeOptionsImage">
    <img src="images/imagemUm.png" id="sectionThreeImage" alt="">
  </div>
</div>
</div>

如果您想减少代码行数，可以在单个语句中进行一些 jQuery 选择，例如 clickedContent.find("h2, .circle").addClass('active')