我的带有切换功能的手风琴按钮无法正常工作

Question

我想创建一个手风琴按钮。

触摸：

1. 出现一个新的文本段落
2. 现在向下的箭头会向上

再次触摸：

1. 让段落消失
2. 现在向上的箭头会向下

var prueba = document.querySelector("#fund-contract-holder-step > div.col10.col6-port.push1.padding-lr-s > span.h3.clr-dark-orange");

// html
var htmlAB = '<div class="accordion"><div class="accordion-item"><div class="item-header"><h1 class="title">Title</h1><div id="z-icon" class="z-icon" icon-name="vi-arrow-down"></div></div><div class="contenido"><p>paragraph1.</p><p>paragraph2</p></div></div></div>';
prueba.insertAdjacentHTML('afterend', htmlAB);

// css
var cssAB = '<style> .accordion{width:1018px; margin: 18px 0px 0px 0px;} .item-header{display:flex; cursor:pointer;} .title{ width: 173px;height: 18px;margin: 0 6px 0 0;font-family: INGMe;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #333333;} #z-icon{color: #ff6200;} .contenido{margin: 16px 0px 24px 0px;font-family: INGMe;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #333333; max-height:0px;overflow: hidden;} .accordion-item.active .contenido{max-height:600px; transition: .4s linear;} </style>';
prueba.insertAdjacentHTML('afterend', cssAB);

// jQuery
$(".item-header").click(function(){
  $(".accordion-item").removeClass("active");
  $(this).parent().addClass("active");
  $(".z-icon").replaceWith('<div id="z-icon" class="z-icon" icon-name="vi-arrow-up">');
});

发生的情况是新段落出现了，但没有消失。

Answer 1

您需要检查父级，即accordion-item 是否有活动类，这取决于您需要添加或删除active 类并更改您的z-icon。

演示代码：

$(document).on("click", ".item-header", function() {
  //check if parent already have active class
  if ($(this).parent().hasClass("active")) {
    $(this).parent().removeClass("active") //remove active class
    $(this).find(".z-icon").replaceWith('<div id="z-icon" class="fa fa-angle-down z-icon" icon-name="vi-arrow-down">'); //add down arrow

  } else {
    $(".accordion-item").removeClass("active");
    $(this).parent().addClass("active") //add class active
    $(this).find(".z-icon").replaceWith('<div id="z-icon" class="fa fa-angle-up z-icon" icon-name="vi-arrow-up">'); //add class up
  }

});

.accordion {
  width: 1018px;
  margin: 18px 0px 0px 0px;
}

.item-header {
  display: flex;
  cursor: pointer;
}

.title {
  width: 173px;
  height: 18px;
  margin: 0 6px 0 0;
  font-family: INGMe;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #333333;
}

#z-icon {
  color: #ff6200;
}

.contenido {
  margin: 16px 0px 24px 0px;
  font-family: INGMe;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  color: #333333;
  max-height: 0px;
  overflow: hidden;
}

.accordion-item.active .contenido {
  max-height: 600px;
  transition: .4s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="accordion">
  <div class="accordion-item">
    <div class="item-header">
      <h1 class="title">Title1</h1>
      <div id="z-icon" class="fa fa-angle-down z-icon" icon-name="vi-arrow-down"></div>
    </div>
    <div class="contenido">
      <p>paragraph1.</p>
      <p>paragraph2</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="item-header">
      <h1 class="title">Title2</h1>
      <div id="z-icon" class="fa fa-angle-down z-icon" icon-name="vi-arrow-down"></div>
    </div>
    <div class="contenido">
      <p>paragraph1.</p>
      <p>paragraph2</p>
    </div>
  </div>
</div>