手风琴需要点击 2 次才能启动 + 图标旋转

Question

我拼凑了一些在我的网站上找到的手风琴常见问题解答代码。我不确定如何通过单击 1 次来扩展标题，因为目前需要 2 次。我还希望图标在 expanding/collapsing 时旋转。目前仅旋转 on/off 悬停。我包括一个简短的例子，说明我目前拥有的东西。

非常感谢任何帮助，谢谢。

  $('.js-question').on('click', function(e) {
    var $answer = $(this).next(),
      actveClass = 'active',
      isActive = $answer.hasClass(actveClass);
    $('.answer').slideUp().addClass(actveClass);
    if (isActive) {
      $answer.toggleClass(actveClass);
      $answer.slideToggle();
    }
  });

.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
    
.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}
    
.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}
    
.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}
    
.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}
    
.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders + receive free shipping. <br /> Canada orders 5+ receive free shipping. <br /> Everywhere else orders 0+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>

Answer 1

您正在向您的函数发送相互矛盾的命令。在这里 $('.answer').slideUp().addClass(actveClass); 您要向上滑动所有答案并将活动 class 添加到所有答案（我相信您想要删除它）。

然后，你问目标答案是否有活动的class（答案显然是肯定的，无论如何，因为你已经将它添加到所有元素之前）。

这个条件 if (isActive) {，即使您之前的代码是正确的，也是完全没有必要的。你可以做什么从除目标答案之外的所有答案中删除活动 class，然后仅切换已点击的答案，你已经在此处定位 $answer = $(this).next().

所以工作代码是：

$('.js-question').on('click', function(e) {
    var $answer = $(this).next(),
      actveClass = 'active';    
    $('.answer').not($answer).slideUp().removeClass(actveClass); /* remove instead of add and apply in every answer except the clicked one*/
    /* remove unnecessary conditional */  
      $answer.toggleClass(actveClass);
      $answer.slideToggle();
  });

.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
    
.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}
    
.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}
    
.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}
    
.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}
    
.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
<p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
<hr />
<p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">Domestic orders + receive free shipping. <br /> Canada orders 5+ receive free shipping. <br /> Everywhere else orders 0+ receive free shipping.</div>
<hr />
<p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span></p>
<div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
<hr />
</div>

更新以使图标正常工作

与 .answer 相同的方法。您从所有按钮中删除活动 class，除了单击的按钮，然后切换单击的按钮 class。

$('.js-question').on('click', function(e) {
  var $answer = $(this).next(),
    actveClass = 'active';
  $('.bracket-button').not($(this)).removeClass(actveClass);
  $('.answer').not($answer).slideUp().removeClass(actveClass);
  $(this).toggleClass(actveClass);
  $answer.toggleClass(actveClass);
  $answer.slideToggle();
});

.faqContainer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
}

.question {
    font-family: Arial MT Pro!important;
    font-size: 14px;
    color: #000;
    letter-spacing: 3px;
    font-weight: 300;
    cursor: pointer;
    overflow: hidden;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
    
.answer {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
    overflow: hidden;
    display: none;
    margin: 10px 0 15px
}
    
.answer a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333!important;
}
    
.answer:hover a{
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 10px;
    line-height: 1.7;
    text-transform: uppercase;
    color: #ababab!important;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out 0s
}

.faqContainer hr {
    opacity: 0;
}

.bracket-button .outer {
    letter-spacing: 0px;
    font-family: 'Arial MT Pro';
    position: absolute;
    margin-top: 0px;
    margin-left: 8px;
}
    
.bracket-button .inner {
    display: inline-block;
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
    -webkit-backface-visibility: hidden;
}
    
.bracket-button:hover .inner {
    transform: rotate(135deg);
    transition: all 0.5s cubic-bezier(0.215,  0.61,  0.355,  1);
    padding: 0px;
}
    
.bracket-button.active .inner {
    transform: rotate(0deg);
    background: url(https://cdn.shopify.com/s/files/1/1547/5153/t/167/assets/cross.svg?v=1631342608) center no-repeat;
    background-size: cover;
    background-position-y: 0px;
}
    
.bracket-button.active:hover .inner {
    transform: rotate(90deg);
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<div class="faqContainer">
  <p class="question js-question bracket-button">LOGISTICS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">Pre-order items will ship roughly 2-3 weeks from the end date specified in the product description.<br />This can sometimes take longer due to print shop schedules/holidays.<br />All in stock orders are shipped within 48 hours of purchase, usually less.<br
    />Orders placed Friday evenings will typically ship the following Monday.<br />Most domestic orders are delivered within a week.<br />Please allow additional time in transit for delivery.<br /> If your order contains pre-order and in stock items,<br
    />your order will ship when all items are on-hand.<br />Please place separate orders if you need the in stock item(s) sooner.</div>
  <hr />
  <p class="question js-question bracket-button">DISCOUNTS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">Domestic orders + receive free shipping. <br /> Canada orders 5+ receive free shipping. <br /> Everywhere else orders 0+ receive free shipping.</div>
  <hr />
  <p class="question js-question bracket-button">CANCELLATIONS<span class="outer"><span class="inner"></span></span>
  </p>
  <div class="answer">If you canceled an order, expect to see the funds back in your account<br />within 2-3 business days, depending on your bank.</div>
  <hr />
</div>

手风琴需要点击 2 次才能启动 + 图标旋转

Accordion takes 2 clicks to initiate + icon rotation

javascript

html

css

accordion

rotatetransform