手风琴的活动标题属性无法正常工作

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>


<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
    <div id="accordion-1" class="accordion-section-content">
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
    <div id="accordion-2" class="accordion-section-content">
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

Answer 1

问题在于触摸设备上的:hover规则。

仅在将:hover插入css规则的@media的触摸设备禁用此功能。

现在，您的css是：

/*----- 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;
}


@media (hover: hover) {
  .accordion-section-title:hover {
   background: #4c4c4c;
   text-decoration: none;
   opacity: 0.5;
  }
}
.accordion-section-title.active{
  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;
}