javascript - 如何从此代码创建手风琴

Question

我在尝试在此代码结构上创建手风琴时遇到问题。我已经尝试了以下代码，但它不起作用。

var allPanels = $('.abc').hide();

$('.click_acc').click(function() {
  //alert("thanks");
  allPanels.slideUp();
  $(this).parent().next().slideDown();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  this is a faq question 1
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 1
  </div>
</li>
<li>
  this is a faq question 2
  <span class="readLinkTag">
    <a class="click_acc" href="#">
      READ MORE 
      <i class="fa fa-chevron-circle-down"></i>
    </a>
  </span>
  <div class="abc">
    this is answer of faq question 2
  </div>
</li>

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用以下代码显示隐藏和更改箭头：

$('#click_acc').click(function() {
$('#abc').toggle('1000');
$("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");});