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;
});
})
});