javascript - 在事件类标题颜色更改(添加/删除类)

Question

我在这里处理 Accordion 我有两个内容 div block 我得到了输出但问题是我的代码不是标准形式而且代码行更多。我想使用添加/删除类来简化它。我想更改事件选项卡标题颜色。谁能指出我正确的方向。

$(".benefits-slide1").click(function() {
  if ($(".benefits-slideDiv1").hasClass("noDisplay")) {
    $(".benefits-slideDiv1").removeClass("noDisplay").show("slideDown");
    $(".benefits-slideDiv2, .benefits-slideDiv3, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown");
  }
});

$(".benefits-slide2").click(function() {
  if ($(".benefits-slideDiv2").hasClass("noDisplay")) {
    $(".benefits-slideDiv2").removeClass("noDisplay").show("slideDown");
    $(".benefits-slideDiv1, .benefits-slideDiv3, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown");
  }
});

$(".benefits-slide3").click(function() {
  if ($(".benefits-slideDiv3").hasClass("noDisplay")) {
    $(".benefits-slideDiv3").removeClass("noDisplay").show("slideDown");
    $(".benefits-slideDiv1, .benefits-slideDiv2, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown");
  }
});

$(".benefits-slide4").click(function() {
  if ($(".benefits-slideDiv4").hasClass("noDisplay")) {
    $(".benefits-slideDiv4").removeClass("noDisplay").show("slideDown");
    $(".benefits-slideDiv1, .benefits-slideDiv2, .benefits-slideDiv3").addClass("noDisplay").hide("slideDown");
  }
});

.slideDiv1 {
  background-color: red;
}

.slideDiv2 {
  background-color: blue;
}

.slideDiv3 {
  background-color: green;
}

.slideDiv4 {
  background-color: pink;
}

.noDisplay {
  display: none;
}

div#accordionExample {
  display: flex;
  flex-direction: column;
}

.benefits-wrap {
  background: #ccc;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="accordion nav" id="accordionExample" id="myTab" role="tablist">
  <div class="benefits-acc">
    <button class="benefits d-flex benefits-slide1">
			<h3 class="pl-3">Personalized health journey</h3>
		</button>
    <div class="card-body benefits-slideDiv1">
      <p>content 1</p>
    </div>
  </div>

</div>
<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide2">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv2 noDisplay">
    <p>content 2</p>
  </div>
</div>

<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide3">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv3 noDisplay">
    <p>content 3</p>
  </div>
</div>

<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide4">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv4 noDisplay">
    <p>content 4</p>
  </div>
</div>

</div>


<div class="benefits-wrap">
  <h3>Second content block</h3>
  <div class="benefits-slideDiv1"> Second content 1</div>
  <div class="benefits-slideDiv2 noDisplay">Second content 2</div>
  <div class="benefits-slideDiv3 noDisplay">Second content 3</div>
  <div class="benefits-slideDiv4 noDisplay">Second content 4</div>
</div>

Answer 1

这是您尝试执行的示例(不完美)，请注意我在每个按钮中使用了 HTML5 data-* 属性来存储 className 的相关 div。

$(".benefits").click(function() {

  let otherButtons = $(".benefits").not($(this));
  otherButtons.siblings(".card-body").addClass("noDisplay");
  otherButtons.parent().removeClass("active");
  
  $(this).parent().addClass("active");

  $('.benefits-wrap').children('div').addClass("noDisplay");

  let divClass = $(this).data('div');
  
  $(`.${divClass}`).toggleClass("noDisplay");

});

.benefits-slideDiv1 {
  background-color: red;
}

.benefits-slideDiv2 {
  background-color: blue;
}

.benefits-slideDiv3 {
  background-color: green;
}

.benefits-slideDiv4 {
  background-color: pink;
}

.noDisplay {
  display: none;
}

div#accordionExample {
  display: flex;
  flex-direction: column;
}

.benefits-wrap {
  background: #ccc;
  height: 100px;
}

.benefits-acc.active {
  background-color: lightblue;
}

.benefits-acc.active h3 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="accordion nav" id="accordionExample" id="myTab" role="tablist">
  <div class="benefits-acc active">
    <button class="benefits d-flex benefits-slide1" data-div="benefits-slideDiv1">
			<h3 class="pl-3">Personalized health journey</h3>
		</button>
    <div class="card-body benefits-slideDiv1">
      <p>content 1</p>
    </div>
  </div>

</div>
<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide2" data-div="benefits-slideDiv2">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv2 noDisplay">
    <p>content 2</p>
  </div>
</div>

<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide3" data-div="benefits-slideDiv3">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv3 noDisplay">
    <p>content 3</p>
  </div>
</div>

<div class="benefits-acc">
  <button class="benefits d-flex benefits-slide4" data-div="benefits-slideDiv4">
		<h3 class="pl-3">Personalized health journey</h3>
	</button>
  <div class="card-body benefits-slideDiv4 noDisplay">
    <p>content 4</p>
  </div>
</div>

</div>


<div class="benefits-wrap">
  <h3>Second content block</h3>
  <div class="benefits-slideDiv1"> Second content 1</div>
  <div class="benefits-slideDiv2 noDisplay">Second content 2</div>
  <div class="benefits-slideDiv3 noDisplay">Second content 3</div>
  <div class="benefits-slideDiv4 noDisplay">Second content 4</div>
</div>