<div class="tnav-o"><div class="tnav-column" style="display:block;"><div ><div class="tanvone" sta="1">一級菜單<div class="tline-r"></div></div></div> </div><div class="tnav-column tnav-column2" ><div sta="1"><div class="tline-long"></div><div class="tanvone" sta="1">二級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="2">二級菜單二<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="3">二級菜單三<div class="tline-l"></div><div class="tline-r"></div></div></div></div><div class="tnav-column tnav-column3"><div sta="1"><div class="tline-long"></div><div class="tanvone" sta="1">二(1) 三級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="2">二(1) 三級菜單二<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="3">二(1) 三級菜單三<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="2"><div class="tline-long"></div><div class="tanvone" sta="4">二(2) 三級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="5">二(2) 三級菜單二<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="6">二(2) 三級菜單三<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="3"><div class="tline-long"></div><div class="tanvone" sta="7">二(3) 三級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="8">二(3) 三級菜單二<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="9">二(3) 三級菜單三<div class="tline-l"></div><div class="tline-r"></div></div></div></div><div class="tnav-column tnav-column4"><div sta="1"><div class="tline-long"></div><div class="tanvone" sta="1">三(1) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="2"><div class="tline-long"></div><div class="tanvone" sta="2">三(2) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="3">三(2) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="3"><div class="tline-long"></div><div class="tanvone" sta="4">三(3) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="5">三(3) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="4"><div class="tline-long"></div><div class="tanvone" sta="6">三(4) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="7">三(4) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="5"><div class="tline-long"></div><div class="tanvone" sta="8">三(5) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="9">三(5) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="6"><div class="tline-long"></div><div class="tanvone" sta="10">三(6) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="11">三(6) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="7"><div class="tline-long"></div><div class="tanvone" sta="12">三(7) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="13">三(7) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="8"><div class="tline-long"></div><div class="tanvone" sta="14">三(8) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="15">三(8) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="9"><div class="tline-long"></div><div class="tanvone" sta="16">三(9) 四級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="17">三(4) 四級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div></div><div class="tnav-column tnav-column5"><div sta="1"><div class="tline-long"></div><div class="tanvone" sta="1">四(1) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="2"><div class="tline-long"></div><div class="tanvone" sta="2">四(2) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="3"><div class="tline-long"></div><div class="tanvone" sta="3">四(3) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="4">四(3) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="4"><div class="tline-long"></div><div class="tanvone" sta="5">四(4) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="6">四(4) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="5"><div class="tline-long"></div><div class="tanvone" sta="7">四(5) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="8">四(5) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="6"><div class="tline-long"></div><div class="tanvone" sta="9">四(6) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="10">四(6) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="7"><div class="tline-long"></div><div class="tanvone" sta="11">四(7) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="12">四(7) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="8"><div class="tline-long"></div><div class="tanvone" sta="13">四(8) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="14">四(8) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="9"><div class="tline-long"></div><div class="tanvone" sta="15">四(9) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="16">四(9) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div><div sta="17"><div class="tline-long"></div><div class="tanvone" sta="15">四(17) 五級菜單一<div class="tline-l"></div><div class="tline-r"></div></div><div class="tanvone" sta="16">四(17) 五級菜單二<div class="tline-l"></div><div class="tline-r"></div></div></div></div></div>

css:

<style type="text/css"> *{ margin:0; padding:0; font-family:微軟雅黑; font-size:12px;} .tnav-o{ width:1200px; height:1200px; overflow:visible; position:relative; color:#ff; margin:160px auto;} .tnav-column{ width:auto; float:left; overflow:visible; float:left; margin-left:80px; position:relative; display:none;} .tline-long{ width:1px; height:calc(100% - 40px); position:absolute; top:20px; left:-40px; background:#0097d4;} .tanvone{ width:auto; height:30px; line-height:30px; text-align:center; padding:0 15px; color:#fff; background:#0097d4; margin:5px 0; position:relative; border-radius:5px; cursor:pointer;} .tline-l{ width:40px; height:1px; background:#0097d4; position:absolute; top:50%; left:-40px;} .tline-r{ width:40px; height:1px; background:#0097d4; position:absolute; top:50%; right:-40px; display:none;} </style>

js:

<script> $(function(){$('.tanvone').click(function(){var sta=$(this).attr('sta')flag=false;$(this).parents('.tnav-column').next().children('div').each(function(index, element) {if($(this).attr('sta')==sta){flag=true;}});//var flag=$(this).parents('.tnav-column').next().children('[sta='+sta+']')//console.log(flag)if(flag){$(this).siblings().children('.tline-r').hide()$(this).children('.tline-r').show()$(this).parents('.tnav-column').nextAll().hide()$(this).parents('.tnav-column').next().show()$(this).parents('.tnav-column').next().children().hide()$(this).parents('.tnav-column').next().children('div[sta='+sta+']').show() $(this).parents('.tnav-column').next().find('.tline-r').hide() var y = $(this).offset().top+$(this).height();var totop=$('.tnav-o').offset().top;y=y-totop-15;var boxH=$(this).parents('.tnav-column').next().height()boxH=boxH/2$(this).parents('.tnav-column').next().css('top',y)$(this).parents('.tnav-column').next().css('margin-top',-boxH)}else{$(this).children('.tline-r').hide()}})}) </script>

最終效果：

轉(zhuǎn)載于:https://www.cnblogs.com/lf2016/p/7168505.html

總結(jié)

以上是生活随笔為你收集整理的树状多层级菜单展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。