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

Question

我使用 html 、 css 和 jquery

创建了手风琴

我已经添加了相关的 css 来改变活动手风琴标题的背景和不透明度，效果很好

但问题是 - 在我第二次点击手风琴标题将其最小化后，它仍然继承活动标题属性

为了使它像其他不活动的手风琴标题一样正常，除了已经最小化它之外，我必须点击手风琴之外的任何地方

我希望有人可以调整代码来解决这个问题

JSBIN link here 显示输出和代码

下面的代码片段中包含代码

$(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规则上。

仅对在 css 规则的 @media 中插入 :hover 的触摸设备禁用它。

现在你的 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;
}

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

Accordion's Active Title properties not working properly

html

javascript

css

jquery

accordion