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

Question

我坐了个层级折叠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>');
}

Answer 1

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

补充运行图