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

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 { 
 
\t display: none; 
 
\t padding : 5px; 
 
} 
 
\t 
 
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{ 
 
\t background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat; 
 
\t background-position:right 0px; 
 
\t cursor:pointer; 
 
\t padding: 0 10px; 
 
    margin: 10px 0; 
 
} 
 
\t 
 
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{ 
 
\t 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 { 
 
\t display: none; 
 
\t padding : 5px; 
 
} 
 
\t 
 
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{ 
 
\t background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat; 
 
\t background-position:right 0px; 
 
\t cursor:pointer; 
 
\t padding: 0 10px; 
 
    margin: 10px 0; 
 
} 
 
\t 
 
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{ 
 
\t 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>