效果
html
<div class="solution solution_main"> <ul class="solution_ul1"> <li><a href="javascript:;">11111</a> <span></span> <ul class="proList2"> <li><a href="javascript:;">111</a></li> <li><a href="javascript:;">111</a></li> <li><a href="javascript:;">111</a></li> </ul> </li> <li><a href="javascript:;">22222</a> <span></span> <ul class="proList2"> <li><a href="javascript:;">222</a></li> <li><a href="javascript:;">222</a></li> <li><a href="javascript:;">222</a></li> </ul> </li> <li><a href="javascript:;">33333</a> <span></span> <ul class="proList2"> <li><a href="javascript:;">333</a></li> <li><a href="javascript:;">333</a></li> <li><a href="javascript:;">333</a></li> </ul> </li> </ul> <div class="solution_ul2"> 123 </div> </div> css .solution_main { display: flex; justify-content: space-between; }.solution_ul1 { width: 30%; }
.solution_ul2 { width: 70%; } .solution ul li { position: relative; }
.solution ul li a { height: 48px; line-height: 48px; color: #333; font-size: 15px; display: block; border-bottom: 1px solid #d2d7d9; padding: 0 15px; }
.solution ul li span { width: 45px; height: 49px; position: absolute; right: 15px; top: 0; background: url(../img/solution/jia_black1.svg) no-repeat center; background-size: 16px; }
.solution ul .on span { background-image: url(../img/solution/jian_black.svg); background-size: 15px; }
.solution .proList2 li a { font-size: 13px; height: 36px; line-height: 36px; }
.solution .proList2 { display: none; } js $('.solution li span').on('click', function () { if ($(this).parents("li").hasClass("on")) { $(this).parents("li").removeClass('on'); $(this).parents("li").find(".proList2 ").slideUp(); } else { $(this).parents("li").addClass('on'); $(this).parents("li").siblings().removeClass('on'); $(this).parents("li").find(".proList2 ").slideDown(); $(this).parents("li").siblings().find(".proList2 ").slideUp(); } }) 标签：proList2,solution,侧边,li,height,parents,js,导航,size From： https://www.cnblogs.com/yangcaicai/p/16911478.html