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()
      })
相关文章
|
6月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
79 7
jQuery幸运大转盘抽奖活动代码
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
57 0
|
JavaScript 开发者
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
108 0
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
42 1
|
8天前
|
JavaScript
jQuery实现的星级打分带评价及颜色区分代码
jQuery实现的星级打分带评价及颜色区分效果代码是一款支持自定义评论颜色的星级评价打分,其中红色为一星级,差评、绿色位五星级、满分好评,本段代码适应于所有网页使用,有需要的朋友们就来下载使用吧。
15 2
|
6月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
107 1
|
5月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
35 0
|
6月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)