Eyoucms手风琴三级菜单，掌握三级分类用法
2022-11-24 加入收藏
应用：适用于左右结构排版三级产品分类或文章分类。
1、效果图
2、HTMl
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!-- 分类折叠手风琴菜单 开始 --><div class="subnavbox bg-white radius"><h2 class="bg-blue text-white">{eyou:channelartlist typeid='$eyou.field.typeid|gettoptype=###,typeid'}{eyou:field name='typename' /}{/eyou:channelartlist}</h2><!--当前栏目下二级栏目调用-->{eyou:channel type="first" currentstyle="active"} {eyou:eq name='$eyou.field.grade' value='2'} {eyou:type typeid='$eyou.field.typeid' id='field1'} {eyou:eq name='$field1.parent_id' value='$field.id'} {eyou:assign name='$field.currentstyle' value='current' /} <!--current对应样式中的display:block--> {/eyou:eq} {/eyou:type} {/eyou:eq} <div class="{$field.currentstyle}dd {$field.currentstyle}dt suboneNav">{$field.typename}</div> <!--当前栏目下三级栏目调用--> {eyou:notempty name="$field.children"} <ul class="cur-bg {$field.currentstyle}"> {eyou:channel name="$field.children" id="field2"} <li><a href="{$field2.typeurl}" class="{$field2.currentstyle}">{$field2.typename}{$field2.typeid}</a> </li> {/eyou:channel} </ul> {/eyou:notempty} {/eyou:channel}</div><!-- 分类折叠手风琴菜单 结束 --> |
3、CSS
1 2 3 4 5 6 7 8 9 10 | .subnavbox h2 {line-height:60px;height:60px;position:relative;font-size:20px;padding:0 0 0 20px;}.subnavbox .current {display:block;}.subnavbox .cur-bg{background:#fff;padding:10px 0;}.subnavbox ul {display:none;}.subnavbox ul li a{display:block;line-height:36px;font-size:14px;color:#999;padding-left:20px;}.subnavbox ul li a:hover {color:#FF6D33;}.subnavbox ul li a.active {color:#FF6D33;}.suboneNav{border-bottom:solid 1px #0BECF1;background:#0AD4D9 url(../images/ico_jia.png) no-repeat;background-position:95% 50%;cursor:pointer;font-size:16px;color:#fff;line-height:54px;padding-left:20px;}.suboneNav:last-child{border-bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px} .currentdt {background-image:url(../images/ico_jian.png);} |
4、JS
1 2 3 4 5 | $(".suboneNav").click(function () { $(this).toggleClass("currentdd").siblings(".suboneNav").removeClass("currentdd"); $(this).toggleClass("currentdt").siblings(".suboneNav").removeClass("currentdt"); $(this).next("ul").slideToggle(300).siblings("ul").slideUp(500);}) |