Accordion 的 Active Title 属性无法正常工作

Question

我使用 html 、 css 和 jquery 创建了一个手风琴我添加了相关的 css 来更改活动手风琴标题的背景和不透明度，效果很好但问题是 - 在我第二次点击手风琴标题以将其最小化后，它仍然在活动标题属性中继承为了使它像其他不活动的手风琴标题一样正常，除了已经将其最小化之外，我还必须点击手风琴之外的任何地方我希望有人可以调整代码来解决这个问题JSBIN]连结这里展示与代码一起输出代码包含在下面的片段中$(document).ready(function () {  function close_accordion_section() {    $('.accordion .accordion-section-title').removeClass('active');    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');  }  $('.accordion-section-title').click(function (e) {    // Grab current anchor value    var currentAttrValue = $(this).attr('href');    if ($(e.target).is('.active')) {      close_accordion_section();    } else {      close_accordion_section();      // Add active class to section title      $(this).addClass('active');      // Open up the hidden content panel      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');    }    e.preventDefault();  });});/*----- Accordion -----*/.accordion,.accordion * {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}.accordion {  overflow: hidden;  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);  border-radius: 3px;  background: #f7f7f7;}/*----- Section Titles -----*/.accordion-section-title {  width: 100%;  padding: 15px;  display: inline-block;  border-bottom: 1px solid #1a1a1a;  background: #333;  transition: all linear 0.15s;  /* Type */  font-size: 1.200em;  text-shadow: 0px 1px 0px #1a1a1a;  color: #fff;}.accordion-section-title.active,.accordion-section-title:hover {  background: #4c4c4c;  text-decoration: none;  opacity: 0.5;}.accordion-section:last-child .accordion-section-title {  border-bottom: none;}/*----- Section Content -----*/.accordion-section-content {  padding: 15px;  display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>