menu_expand.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <div class="layui-side layui-side-expand layui-side-{$admin.theme}">
  2. <div class="layui-logo" gg-event="closeAllTabs">
  3. <img src="{$web.logo|default=''}" onerror="javascript:this.src='{__IMG__}/syslogo.png';this.onerror=null;" style="height: 38px;" class="syslogo">
  4. <img src="{$web.small_logo|default=''}" onerror="javascript:this.src='{__IMG__}/syslogo_small.png';this.onerror=null;" style="height: 38px;" class="logo">
  5. </div>
  6. <ul id="menuList">
  7. <li class="layui-nav-item menu-li">
  8. <a href="javascript:;" class="side-menu-item layui-this" data-href="/home/index/main.html" data-id="0" style="padding-top:0; padding-bottom:0;"><i class="iconfont icon-xueshuguanli"></i> 工 作 台</a>
  9. </li>
  10. {foreach name="menu" item="a"}
  11. {empty name="$a.list"}
  12. <li class="menu-li">
  13. <a href="javascript:;" lay-tips="{$a.title}" lay-direction="2" data-id="{$a.id}" data-title="{$a.title}" data-href="/{$a.src}"><i class="iconfont {$a.icon}"></i> <cite>{$a.title}</cite></a>
  14. </li>
  15. {else/}
  16. <li class="layui-nav-item menu-li">
  17. <a href="javascript:">
  18. <i class="iconfont {$a.icon}"></i> <cite>{$a.title}</cite>
  19. </a>
  20. <dl class="gg-second-menu">
  21. <dt><strong>{$a.title}</strong></dt>
  22. {foreach name="$a.list" item="b"}
  23. {empty name="$b.list"}
  24. <dd><a href="javascript:;" class="side-menu-item" data-id="{$b.id}" data-title="{$b.title}" data-href="/{$b.src}">{$b.title}</a></dd>
  25. {else/}
  26. <dd>
  27. <dl class="gg-three-menu">
  28. <dt><strong>{$b.title}</strong><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></dt>
  29. {foreach name="$b.list" id="c"}
  30. <dd><a href="javascript:;" class="side-menu-item" data-id="{$c.id}" data-title="{$c.title}" data-href="/{$c.src}">{$c.title}</a></dd>
  31. {/foreach}
  32. </dl>
  33. </dd>
  34. {/empty}
  35. {/foreach}
  36. </dl>
  37. </li>
  38. {/empty}
  39. {/foreach}
  40. </ul>
  41. </div>
  42. <script>
  43. function menuInit() {
  44. let $menuListNode = $('#menuList'); // 侧边菜单节点
  45. let $AppBodyNode = $('#GouguAppBody');// 主体页面节点
  46. //主菜单
  47. $menuListNode.on('click', '.menu-li', function () {
  48. if (!$(this).children('a').hasClass('layui-this')) {
  49. $(this).siblings().find('a').removeClass('layui-this');
  50. $(this).children('a').addClass('layui-this');
  51. // 子菜单
  52. $(this).siblings().find('.gg-second-menu').removeClass('current');
  53. if ($(this).children('.gg-second-menu').length) {
  54. let subNode = $(this).children('.gg-second-menu').find('a');
  55. $(this).children('.gg-second-menu').addClass('current');
  56. subNode.eq(0).children('i').length ? subNode.eq(1).click() : subNode.eq(0).click();
  57. $AppBodyNode.addClass('sub-menu');
  58. } else {
  59. $AppBodyNode.removeClass('sub-menu');
  60. }
  61. }
  62. });
  63. //子菜单
  64. $menuListNode.on('click', '.gg-three-menu dt', function () {
  65. $(this).parent().toggleClass('show-up');
  66. });
  67. }
  68. </script>