jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开

简介: jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开

废话不说上代码

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()
      })
相关文章
|
1月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
34 7
jQuery幸运大转盘抽奖活动代码
|
5月前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
30 0
|
7月前
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
65 0
|
7月前
|
JavaScript 开发者
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
41 1
|
1月前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
18 1
jQuery模态框弹窗提示代码
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
21 0
|
9月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
73 0
|
4月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
31 0