单击展开/折叠全部时箭头指向正确的方向

Question

我做了“展开/全部折叠”功能，除箭头外，一切运行良好。它没有指向正确的方向。我不知道该怎么做，所以我把它留在我的代码上。我的问题如下所示。

（红框表示点击操作）

1. 点击“查看全部”，可以看到扩展器已打开。箭头指向下方。

2. 单击“A”折叠扩展器，箭头指向上方。

3. 单击“全部折叠”，扩展器将被替换。现在你可以看到我的问题，“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

只需在show all function

中添加a b c d e f g 1980/81 1182 5408 292 7248 174 2212 1981/82 1098 5112 257 7316 242 1936 1982/83 1156 5701 330 8567 124 1802 1983/84 993 4265 391 8905 141 1078 1984/85 1182 5364 217 5813 343 4313 （$('.mobexpand').addClass('collapsed');）即可

和$(".expandall").click（$('.mobexpand').removeClass('collapsed');）和collsapse中的所有功能都如下所示

$(".collapseall").click

$(".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');
}