废话不说上代码
html代码
<!-- 加入我们 --> <div class="li-jia_ru w1204 mar-0auto "> <div class="li-jia_ru-tit">加入我们</div> <ul class="li-jia-list"> <!-- item --> <li> <div class="list-1"> <div class="list-1-1">项目经理4名</div> <div class="list-1-2 row1">暖通、机电安装、工程管理等相关专业专科及以上学历;2年以上净化工程管理经验...</div> <div class="list-1-3"> <img src="imges/jia.png" alt="" class="h100"> <img src="imges/jian.png" alt="" class=" h100"> </div> </div> <div class="list-2 "> <ol> <li>装饰工程相关专业专科及以上学历</li> <li>熟悉施工安装规范及流程;</li> <li>二级建造师(机电)及以上证书</li> <li>年龄:45周岁以下</li> </ol> </div> </li> <!-- item --> <li> <div class="list-1"> <div class="list-1-1">项目经理4名</div> <div class="list-1-2 row1">暖通、机电安装、工程管理等相关专业专科及以上学历;2年以上净化工程管理经验...</div> <div class="list-1-3"> <img src="imges/jia.png" alt="" class="h100"> <img src="imges/jian.png" alt="" class="w100"> </div> </div> <div class="list-2 "> <ol> <li>装饰工程相关专业专科及以上学历</li> <li>熟悉施工安装规范及流程;</li> <li>二级建造师(机电)及以上证书</li> <li>年龄:45周岁以下</li> </ol> </div> </li> <!-- item --> <li> <div class="list-1"> <div class="list-1-1">项目经理4名</div> <div class="list-1-2 row1">暖通、机电安装、工程管理等相关专业专科及以上学历;2年以上净化工程管理经验...</div> <div class="list-1-3"> <img src="imges/jia.png" alt="" class="h100"> <img src="imges/jian.png" alt="" class="w100"> </div> </div> <div class="list-2 "> <ol> <li>装饰工程相关专业专科及以上学历</li> <li>熟悉施工安装规范及流程;</li> <li>二级建造师(机电)及以上证书</li> <li>年龄:45周岁以下</li> </ol> </div> </li> </ul> </div>
css代码,样式自己调,默认第二项展示
/* 默认第二项展示 */ .li-jia-list > li:nth-child(2) > .list-1 > .list-1-3 >img:first-child, .li-jia-list > li:nth-child(2) > .list-2{ display: block; }
jquery 核心代码
// 展开收缩功能 $('.li-jia-list > li').on('click', function() { // 找到当前位置下的索引 const index = $(this).index(); console.log(index); $(this).siblings(".li-jia-list > li").removeAttr("id") if($(this).attr("id")=="open"){ // 加号 $(this).removeAttr("id").children('.list-1').children('.list-1-3').children('img:first-child').show() $(this).removeAttr("id").children('.list-1').children('.list-1-3').children('img:last-child').hide() console.log('收缩'); }else{ // 减号 $(this).attr("id","open").children('.list-1').children('.list-1-3').children('img:first-child').hide() $(this).attr("id","open").children('.list-1').children('.list-1-3').children('img:last-child').show() console.log('展开'); $(this).find('.list-1').children('.list-1-3').children('img:first-child').hide().parents('.li-jia-list > li').siblings('.li-jia-list > li').children('.list-1').children('.list-1-3').children('img:first-child').show() $(this).find('.list-1').children('.list-1-3').children('img:last-child').show().parents('.li-jia-list > li').siblings('.li-jia-list > li').children('.list-1').children('.list-1-3').children('img:last-child').hide() } // 内容展开与收缩 $(this).find('.list-2').slideToggle().parents('.li-jia-list > li').siblings('.li-jia-list > li').children('.list-2').slideUp() })