单击时将类添加到父级 div

Question

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

我编辑了 jQuery 代码以包含当单击卡片关闭 class 时，选择删除展开并添加 class 未设置，以及如果卡片-单击关闭，选择删除小并添加 class 未设置。

虽然我使用过的任何东西都没有用，但我认为这是因为 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

使用相对寻址

类似这样的内容 - 运行全屏显示

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

Answer 2

或者你可以在关闭事件中使用stopPropagation，事件会在触发打开之前停止，例如

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

单击时将类添加到父级 div

Adding classes to a parent div on click

html

jquery

css

onclick

accordion

单击时将 类 添加到父级 div

Adding classes to a parent div on click

html

jquery

css

onclick

accordion

单击时将类添加到父级 div