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>