javascript - 在活动类标题颜色更改（添加/删除类）

Question

我在这里研究手风琴我有两个内容 div 块我得到了输出，但问题是我的代码不是标准格式并且代码行更多。我只想使用添加/删除类使其简短而简单。我想更改活动标签标题的颜色。谁能指出我正确的方向。

$(".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>

标签： javascriptjqueryhtmlcss

Answer 1

这是您尝试做的一个示例（不完美），请注意，我data-*在每个按钮中使用了 HTML5 属性来存储关联的classNamediv。

$(".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>