js多个列表框点击按钮展开与收起

 

<div class="taskList mytask">
                <img src="img/renwuimg1.png" />
                <div class="task-title">
                    <span class="title">北欧简约设计风格小户型家装家具</span><br />
                </div>
                <div class="taskBtn">
                    <button class="radiusButton"><span class="an">展开</span><img src="img/shouqi.png"/></button>
                </div>
                <div class="detailsTask">
                    <div class="detailsTaskitems">
                        <img src="img/mytask-yizi.png"/>
                        <p>简约现代书房椅子皮艺全包餐椅会议室休闲椅高档咖啡椅</p>
                        <button>订购</button>
                    </div>
                    <div class="detailsTaskitems">
                        <img src="img/mytask-shafa.png"/>
                        <p>北欧布艺沙发 组合小户型客厅整装现代简约家具实木L型木加布沙发</p>
                        <button>订购</button>
                    </div>
                    <div class="detailsTaskitems">
                        <img src="img/mytask-danrenshafa.png"/>
                        <p>北欧布艺沙发单人位8108</p>
                        <button>订购</button>
                    </div>
                    
                    <img class="arrowonThe" src="img/shuangjiantou.png"/>
                </div>
            </div>

$(document).ready(function() {
//                      展开与收起
                $(".mytask").each(function(){
                    let index = $(this).index();
//                    console.log(index);
                    let theNum = false;
                    $(this).find(".radiusButton").click(function(){
                        if (theNum == false) {
                            $(".detailsTask").eq(index).slideDown(300);
                            $(".mytask .taskBtn img").eq(index).addClass('active-task');
                            $(".an").eq(index).html("收起");
                            theNum = true;
                        }else{
                            $(".detailsTask").eq(index).slideUp(300);
                            $(".mytask .taskBtn img").eq(index).removeClass('active-task');
                            $(".an").eq(index).html("展开");
                            theNum = false;
                        }
                        console.log(theNum);
                    });
                    
                    $(this).find(".arrowonThe").click(function(){
                        $(".detailsTask").eq(index).slideUp(300);
                        $(".mytask .taskBtn img").eq(index).removeClass('active-task');
                        $(".an").eq(index).html("展开");
                        theNum = false;
                    });
                })
                
            });