单击 expan/collapse 时箭头指向正确的方向

Question

我做了 "expand/collapse all" 功能，一切正常，除了箭头。它没有指向正确的方向。我不确定该怎么做，所以我在代码中将其留空。我的问题如下所示。

（红框代表点击动作）

点击"View all"，可以看到展开器已经打开。箭头指向下方。
单击 "A" 折叠展开器，箭头向上。
单击"Collapse all"，扩展器被折叠。现在你可以看到我的问题了，"A" 箭头是向上的，其余的是向下的。

希望你们中的一些人能给我一些建议。谢谢！

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle1").click(function() {
  $('.aq_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle2").click(function() {
  $('.aq_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".expandall").click(function() {
  $('.aq_expandct').slideDown().toggleClass('active');
  $('.aq_expandct1').slideDown().toggleClass('active');
  $('.aq_expandct2').slideDown().toggleClass('active');
});

$(".collapseall").click(function() {
  $('.aq_expandct').slideUp().removeClass('active');
  $('.aq_expandct1').slideUp().removeClass('active');
  $('.aq_expandct2').slideUp().removeClass('active');
});

ul { list-style-type: none; margin:0; padding: 0; } 


.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
 display: none;
 padding : 5px;
}
 
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
 background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
 background-position:right 0px;
 cursor:pointer;
 padding: 0 10px;
  margin: 10px 0;
}
 
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
 background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">A</div>
    <ul class="aq_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle1">B</div>
    <ul class="aq_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="aq_epdtitle2">C</div>
    <ul class="aq_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

Answer 1

只需在显示所有功能中添加$('.mobexpand').addClass('collapsed'); ($(".expandall").click)

和 $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) 以及在 collsapse 中的所有功能如下

$(".aq_epdtitle").click(function() {
  $('.aq_expandct').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle1").click(function() {
  $('.aq_expandct1').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".aq_epdtitle2").click(function() {
  $('.aq_expandct2').slideToggle().toggleClass('active');
  $(this).closest('.mobexpand').toggleClass('collapsed');
});

$(".expandall").click(function() {
  $('.aq_expandct').slideDown().toggleClass('active');
  $('.aq_expandct1').slideDown().toggleClass('active');
  $('.aq_expandct2').slideDown().toggleClass('active');
  $('.mobexpand').removeClass('collapsed');
});

$(".collapseall").click(function() {
  $('.aq_expandct').slideUp().removeClass('active');
  $('.aq_expandct1').slideUp().removeClass('active');
  $('.aq_expandct2').slideUp().removeClass('active');
  $('.mobexpand').addClass('collapsed');
});

ul { list-style-type: none; margin:0; padding: 0; } 


.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
 display: none;
 padding : 5px;
}
 
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
 background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
 background-position:right 0px;
 cursor:pointer;
 padding: 0 10px;
  margin: 10px 0;
}
 
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
 background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle">A</div>
    <ul class="aq_expandct">
      <li>A1</li>
      <li>A2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed">
    <div class="aq_epdtitle1">B</div>
    <ul class="aq_expandct1">
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li class="mobexpand collapsed noborder">
    <div class="aq_epdtitle2">C</div>
    <ul class="aq_expandct2">
      <li>C1</li>
      <li>C2</li>
    </ul>
  </li>
</ul>

单击 expan/collapse 时箭头指向正确的方向

Arrow pointing to the correct direction when click expan/collapse all

html

javascript

jquery

expander

toggle