单击时将类添加到父 div

Question

我有一个类似于手风琴的设置，但是是垂直的。我希望将“未设置”类添加到“选择”类中，同时删除“扩展”和“小”类。

我编辑了 jQuery 代码以包含在点击卡片关闭类时，选择删除展开并添加未设置的类，并且如果点击卡片关闭，选择删除小并添加未设置的类。

>

我使用过的任何东西都没有奏效，我认为这是因为 div 位于“选择”部分内。

关于如何让它发挥作用的任何想法？

jQuery(document).ready(function() {

  jQuery(".card-close").on("click", function() {
    jQuery(".choice").removeClass("expand");
    jQuery(".choice").addClass("unset");
    jQuery(".choice").removeClass("small");
    jQuery(".choice").addClass("unset");
  });

  jQuery(".choice").on("click", function() {
    jQuery(".choice").removeClass("expand unset ");
    jQuery(".choice").addClass("small");
    jQuery(this).removeClass("small");
    jQuery(this).addClass("expand");
  });

})

.container {
  display: flex;
  width: 100%;
  padding: 0;
}

.choice {
  height: 40vw;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  float: left;
  align-items: center;
  transition: width 0.2s;
  position: relative;
}

.card-body {
  z-index: 9;
}

.card-body h4 {
  text-align: center;
  font-family: 'Poppins', sans-serif !important;
  color: #fff;
  font-weight: 700;
  opacity: .7;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 3px;
  width: max-content;
}

.card-body .card-title {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

.expand .card-body .card-title {
  left: 56%;
  top: 40%;
}

.card-body .card-title .card-open,
.card-body .card-title .card-close {
  color: #000;
  background-color: #CBE3A9;
  width: max-content;
  padding: 0 7px;
  font-size: 20px;
  margin: 0 auto;
}

.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
  display: none;
}

.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
  display: block;
}

.choice .bg-image {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  filter: blur(6px);
  transition: 1s;
  z-index: -9;
}

.danger-color .bg-image {
  background-color: green;
}

.warning-color .bg-image {
  background-color: blue;
}

.success-color .bg-image {
  background-color: red;
}

.info-color .bg-image {
  background-color: yellow;
}

.choice.expand .bg-image {
  filter: blur(0px);
  transition: 1s;
  z-index: -999;
}

.expand .card-text {
  width: 32%;
  background-color: #A7D16D;
  padding: 2%;
  margin: 0 auto;
  position: absolute;
  left: 57%;
  top: 51.9%;
}

.expand .card-body h4 {
  opacity: 1;
  font-size: 65px;
}

.small .card-body h4 {
  font-size: 25px;
}

.expand {
  width: 130%;
}

.unset {
  width: 25%;
  cursor: pointer;
}

.small .card-title h4 {
  display: none;
}

.small {
  width: 5%;
  cursor: pointer;
  background-color: #0000006e;
}

.small>.card-body .card-text {
  opacity: 0;
}

.unset>div>p {
  opacity: 0;
}

.expand>div {
  transition-delay: 200ms;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
  <div class="choice unset mx-2 danger-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Strategic</h4>
        <p class="card-open">+</p>
        <p class="card-close">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
    </div>

  </div>
  <div class="choice unset mx-2 warning-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Experience</h4>
        <p class="card-open">+</p>
        <p class="card-close">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
        were on the client side.</p>
    </div>
  </div>
  <div class="choice unset mx-2 success-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Fearless</h4>
        <p class="card-open">+</p>
        <p class="card-close">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
    </div>

  </div>
  <div class="choice unset mx-2 info-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Diverse</h4>
        <p class="card-open">+</p>
        <p class="card-close">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
        complex world in which we live.</p>
    </div>

  </div>
</div>

Answer 1

或者你可以在close事件中使用stopPropagation，事件会在触发open之前停止，例如

jQuery(".card-close").on("click", function(event) {
    event.stopPropagation();
    jQuery(".choice").removeClass("expand");
    jQuery(".choice").addClass("unset");
    jQuery(".choice").removeClass("small");
    jQuery(".choice").addClass("unset");
  });

在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

使用相对寻址

类似这样的东西 - 全屏运行

$(document).ready(function() {
  $(".card-toggle").on("click", function() {
    const $parent = $(this).closest(".choice")
    $parent.toggleClass("expand");
    $parent.toggleClass("unset");
    $parent.toggleClass("small");
    $parent.toggleClass("unset");
    $(this).text($parent.hasClass("expand") ? "+" : "-")
  });
})

.container {
  display: flex;
  width: 100%;
  padding: 0;
}

.choice {
  height: 40vw;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  float: left;
  align-items: center;
  transition: width 0.2s;
  position: relative;
}

.card-body {
  z-index: 9;
}

.card-body h4 {
  text-align: center;
  font-family: 'Poppins', sans-serif !important;
  color: #fff;
  font-weight: 700;
  opacity: .7;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 3px;
  width: max-content;
}

.card-body .card-title {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

.expand .card-body .card-title {
  left: 56%;
  top: 40%;
}

.card-body .card-title .card-open,
.card-body .card-title .card-close {
  color: #000;
  background-color: #CBE3A9;
  width: max-content;
  padding: 0 7px;
  font-size: 20px;
  margin: 0 auto;
}

.card-body .card-title .card-close,
.expand .card-body .card-title .card-open {
  display: none;
}

.expand .card-body .card-title .card-close,
.card-body .card-title .card-open {
  display: block;
}

.choice .bg-image {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  filter: blur(6px);
  transition: 1s;
  z-index: -9;
}

.danger-color .bg-image {
  background-color: green;
}

.warning-color .bg-image {
  background-color: blue;
}

.success-color .bg-image {
  background-color: red;
}

.info-color .bg-image {
  background-color: yellow;
}

.choice.expand .bg-image {
  filter: blur(0px);
  transition: 1s;
  z-index: -999;
}

.expand .card-text {
  width: 32%;
  background-color: #A7D16D;
  padding: 2%;
  margin: 0 auto;
  position: absolute;
  left: 57%;
  top: 51.9%;
}

.expand .card-body h4 {
  opacity: 1;
  font-size: 65px;
}

.small .card-body h4 {
  font-size: 25px;
}

.expand {
  width: 130%;
}

.unset {
  width: 25%;
  cursor: pointer;
}

.small .card-title h4 {
  display: none;
}

.small {
  width: 5%;
  cursor: pointer;
  background-color: #0000006e;
}

.small>.card-body .card-text {
  opacity: 0;
}

.unset>div>p {
  opacity: 0;
}

.expand>div {
  transition-delay: 200ms;
  opacity: 1;
}

.card-toggle { font-size: xx-large }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container mt-5 justify-content-center">
  <div class="choice unset mx-2 danger-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Strategic</h4>
        <p class="card-toggle">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">Every FeltonBuford Partners’ insight strategist has worked on the client side. As former leaders of businesses, we can understand the problems our clients face and deliver the level of strategic thinking that leads to true business breakthroughs.</p>
    </div>

  </div>
  <div class="choice unset mx-2 warning-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Experience</h4>
        <p class="card-toggle">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">For more than two decades, FeltonBuford Partners has been providing powerful insights that lead to transformational growth for our clients. From the beginning, our goal has been to be the kind of research firm we would have wanted to hire when we
        were on the client side.</p>
    </div>
  </div>
  <div class="choice unset mx-2 success-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Fearless</h4>
        <p class="card-toggle">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">We have earned the reputation for being fearless. Because of our depth of experience, we have the confidence to tackle the toughest and most complex projects across the globe.</p>
    </div>

  </div>
  <div class="choice unset mx-2 info-color">
    <div class="bg-image"></div>
    <div class="card-body">
      <!-- Title -->
      <div class="card-title">
        <h4>Diverse</h4>
        <p class="card-toggle">-</p>
      </div>
      <!-- Text -->
      <p class="card-text">Our diversity is a true strength. As a minority and women-owned company, we have a unique appreciation of the diversity of the human experience. We can apply our varied talents and perspectives to a broader and more relevant understanding of the
        complex world in which we live.</p>
    </div>

  </div>
</div>