Question

我的手风琴工作正常，现在唯一的问题是从打开的面板中获取当前图标，以便在选择另一个手风琴标题时进行切换。

当您单击已选择的手风琴头时，当前图标会切换。

非常感谢您的帮助，

HTML

<div class="description-container">

<div class="accordion">
   <h2 class="section-header">Heading 1</h2>
   <div class="panel">
      <p class="text-light">
      • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy!
      • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax
      • Naturally anti-bacterial
      • BPA & phthalate free (thank goodness!)
      • Intricately designed with love and sanded by hand
      • Made from scratch entirely in NYC, from start to finish
      </p>
   </div>
</div>
<div class="accordion">
   <h2 class="section-header">Heading 2</h2>
   <div class="panel">
      <p class="text-light">
      • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
   </div>
</div>

JQUERY

$(".section-header").addClass("closed");

$('.section-header').click(function() {
$(this).parent(".accordion").find('.panel').slideToggle();
$(this).parent(".accordion").siblings().find('.panel').slideUp();
$(this).toggleClass("closed active");
return false;
});

这是一个正在运行的演示-FIDDLE

Answer 1

1）关闭所有其他$('.section-header')并删除类active

2）切换被点击的那个

这是一个演示：

$(".section-header").addClass("closed");

$('.section-header').click(function() {
  let $this = $(this);
  let $others = $(".section-header").not($this);
  
  $others.addClass("closed").removeClass('active');;
  $others.siblings().slideUp();

  $this.toggleClass("closed active");
  $this.siblings().slideToggle();

  return false;
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.accordion {
  width: 100%;
  border-bottom: 1px solid #000;
}

.accordion:first-child {
  border-top: 1px solid #000;
}

h2 {
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 0 10px 0;
}

.panel {
  display: none;
}

.section-header.active::after {
  content: "\2212";
  color: #000;
  display: block;
}

.section-header.closed::after {
  content: '\002B';
  color: #000;
}

.section-header::after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="description-container">

  <div class="accordion">
    <h2 class="section-header">Heading 1</h2>
    <div class="panel">
      <p class="text-light">
        • Made from all-natural, sustainable, and non-splintering rock-hard maple wood that makes sore gums happy! • Non-toxic, untreated, & sealed with all-natural and eco-friendly beeswax • Naturally anti-bacterial • BPA & phthalate free (thank goodness!) •
        Intricately designed with love and sanded by hand • Made from scratch entirely in NYC, from start to finish
      </p>
    </div>
  </div>
  <div class="accordion">
    <h2 class="section-header">Heading 2</h2>
    <div class="panel">
      <p class="text-light">
        • Gift ready in unique recyclable packaging, featuring all of LexyPexy's exclusive (and cute!) designs
      </p>
    </div>
  </div>

</div>

Answer 2

仅此而已！

.ui-accordion .ui-accordion-header-active:after{
	float:right;
	content:"-";
}

.ui-accordion .ui-accordion-header-collapsed:after{
	float:right;
	content:"+";
}

切换手风琴的加/减图标

2 个答案: