it0_soft 2022-12-08 09:41 采纳率: 50%
浏览 33
已结题

层级折叠问题,实现了一部分剩下部分不会了

我坐了个层级折叠ul>li>ul>li>ul>li,所有折叠都在外面的ul下,默认前两层ul是显示的,现在有2014和2015两个ul层级,当前打开2014层级,再打开2015层级的时候2014层级下最后一个ul要关闭,不知道怎么实现了,我贴上代码。
css:

```css
.fzlc{width:100%;margin-top:.7rem;overflow:hidden;}
.fzlc .year{font-size:1.2rem;line-height:1.1;font-weight:400;}
.fzlc li{width:100%;margin-bottom:.45rem;padding-bottom:5px;position:relative;}
.fzlc>ul>li>ul>li{border-bottom:1px solid #e6e7e9;}
.fzlc li .year-con{width:90%;display:inline-block;font-size:.75rem;line-height:1.2rem;margin-top:.7rem;}
.fzlc li i{position:absolute;line-height:4.5rem;right:0px;border-left:0px #ddd solid;padding:0px 7px 0 7px;}
.fzlc li i svg{transform:rotate(0deg);transition:all ease 0.35s}
.fzlc li .fzlc_i_se svg{transform:rotate(-180deg)}
.fzlc li i svg{width:20px;height:20px;fill:#555;}
.fzlc li .fzlc_i_se svg{fill:#c92924;}
.fzlc ul li ul{display:block;}
.fzlc ul li ul li ul{display:none;}
.fzlc>ul>li:last-child{border-bottom:0px #ddd solid;}
/* .fzlc>ul>li:last-child{border-bottom:0px #ddd solid;} */
.fzlc li.on{color:#c92924;border-bottom:1px solid #c92924;}
.fzlc>ul>li>ul>li>ul>li{width:256px;height:200px;overflow:hidden;margin:.7rem 0;}
/* 合作单位 */
.index-hzdw{width:100%;background:url(../images/icon10.jpg) no-repeat;background-size:100% 100%;}
.hz{margin-top:1.2rem;}
.hz ul li{width:5rem;height:5rem;float:left;background:#fff;border-radius:50%;margin-right:4.5%;margin-bottom:1.2rem;}
.hz ul li:nth-child(3n){margin-right:0;}
.hz ul li a{width:5rem;height:5rem;display:table-cell; vertical-align:middle; text-align:center; *display: block;}
.hz ul li a img{width:3rem;vertical-align:middle;}
html代码

```html
<div class="fzlc">
       <ul>
           <li><div class="year dinr">2014</div>
          <ul>
              <li><div class="year-con">1月,于美国芝加哥,成立新概念科技转化服务公司NeoRainbow Tech(新彩虹科技),致力于国际科技成果转化和技术市场化。</div><i class="fzlc_xjb"></i>
             <ul>
                 <li><img src="images/icon03.jpg" alt=""></li>
             </ul>
              </li>
              <li><div class="year-con">8月,于荷兰埃因霍温,成立NeoRainbow Tech(新彩虹科技)的欧洲分公司。</div><i class="fzlc_xjb"></i>
             <ul>
                 <li><img src="images/icon03.jpg" alt=""></li>
             </ul>
              </li>
          </ul>
           </li>
           <li><div class="year dinr">2015</div>
          <ul>
              <li><div class="year-con">1月,于美国芝加哥,成立新概念科技转化服务公司NeoRainbow Tech(新彩虹科技),致力于国际科技成果转化和技术市场化。</div><i class="fzlc_xjb"></i>
             <ul>
                 <li><img src="images/icon03.jpg" alt=""></li>
             </ul>
              </li>
              <li><div class="year-con">8月,于荷兰埃因霍温,成立NeoRainbow Tech(新彩虹科技)的欧洲分公司。</div><i class="fzlc_xjb"></i>
             <ul>
                 <li><img src="images/icon03.jpg" alt=""></li>
             </ul>
              </li>
          </ul>
           </li>
       </ul>
        <div class="more rmat5"><a href="">了解更多</a> <i class="fa fa-angle-right"></i></div>
   </div>

js代码

function fzlc(){
    $('.fzlc ul li ul li i').click(function () {
        $(this).parent().children('ul').slideToggle().parent().siblings().children('ul').slideUp();
        $(this).parent("li").toggleClass('on');
        $(this).toggleClass('fzlc_i_se');
        $(this).parent().siblings().find('i').removeClass('fzlc_i_se');
        $(this).parent("li").siblings().removeClass('on');
    });
    $('.fzlc_xjb').html('<svg t="1496193951932" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M768.468 428.876l-84.723-84.723-170.711 170.711-170.711-170.711-84.723 84.723 170.711 170.711-0.092 0.091 84.723 84.724 0.092-0.092 0.092 0.092 84.723-84.724-0.092-0.091z" p-id="996"></path></svg>');
}

  • 写回答

2条回答 默认 最新

  • 1024次日落 2022-12-08 11:05
    关注

    在点击其中一个的时候需要找到这级元素的上一级 过滤出需要折叠的元素就行
    我写了一点 亲测可用 如果是您需要的效果 还望采纳奥!!

    img

    补充运行图

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月16日
  • 已采纳回答 12月8日
  • 创建了问题 12月8日

悬赏问题

  • ¥15 请问不小心下载到了钓鱼软件怎么办?
  • ¥15 求国博抢票 求国博抢票 有的私
  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]