关于非iframe版本菜单高亮 一般后台的左侧菜单,都是通用的,在这种情况下,切换到新的页面,菜单的高亮,1、可以采用后端程序处理。2、采用js处理。js匹配url地址的解决方式相对而言还有一些延迟。 这里给出的是原生php的输出菜单的方案,其他采用php框架或者一些模板引擎可采用类似的处理方式。 当然如果你是php开发,你也可以参考我的thinkphp的项目来操作。 ```php // 菜单的树状结构数组 $sidebar = [ "1" => [ "id" => 1, "pid" => 0, "name" => "mdi mdi-home", "title" => "后台首页", "url" => "/admin/config/home.html" ], "2" => [ "id" => 2, #主键值 "pid" => 0, #父ID "name" => "mdi mdi-menu", #icon图标名称 "title" => "系统管理", #菜单名称 "url" => '', "children" => [ "5" => [ "id" => 5, "pid" => 2, "name" => "", "title" => "网站设置", "url" => "/admin/config/one.html" ], "6" => [ "id" => 6, "pid" => 2, "name" => "", "title" => "二级菜单", "url" => '', "children" => [ "20" => [ "id" => 20, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/two.html" ], "21" => [ "id" => 21, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/three.html" ] ] ] ] ], "10" => [ "id" => 10, "pid" => 0, "name" => "mdi mdi-account", "title" => "用户管理", "url" => "/admin/config/four.html" ] ]; // 当前位置的树状结构数组(相当于前台网站的面包屑) $location = [ [ "id" => 2, "pid" => 0, "name" => "mdi mdi-home", "title" => "系统管理", "url" => "", 'children' => [ [ "id" => 6, "pid" => 2, "name" => "", "title" => "二级菜单", "url" => '', "children" => [ [ "id" => 20, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/two.html" ] ] ] ] ] ]; echo createMenu($sidebar, 1, $location); /** * 这里单文件演示,只做一次性输出左侧菜单,如果实在view层页面中做菜单循环的操作类似 * @param array $data 菜单数组 * @param integer $isFrist 是否首次(主要是用于最外层的ul) * @param array $location 当前位置数组 * @param string $blockStyle 是否展开的样式 * @return string 菜单html字符串 */ function createMenu($data, $isFrist = 0, $location = [], $blockStyle = '') { $menuBody = $isFrist == 1 ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav" '.$blockStyle.'>'; foreach($data as $k => $v) { $iconDiv = empty($v['name']) ? '' : '<i class="'. $v['name'] .'"></i>'; $isOpen = $location && $location[0]['id'] == $v['id'] ? ($v['pid'] == 0 ? ' active open' : ' open') : ''; $selected = $location && $location[0]['id'] == $v['id'] ? ' active' : ''; $sdata = $location && isset($location[0]['children']) ? $location[0]['children'] : ''; $isBlock = $location && $location[0]['id'] == $v['id'] && $v['pid'] != 0 ? ' style="display:block"' : ''; $menuName = $v['pid'] == 0 ? '<span>'. $v['title'] .'</span>' : $v['title']; if (isset($v['children']) && count($v['children']) > 0) { $menuBody .= '<li class="nav-item nav-item-has-subnav '. $isOpen .'"><a href="#!">'. $iconDiv . $menuName .'</a>'; $menuBody .= createMenu($v['children'], 0, $sdata, $isBlock); } else { $menuBody .= '<li class="nav-item '.$selected.'"><a href="'. $v['url'] .'" class="multitabs">'. $iconDiv . $menuName; } $menuBody .= '</li>'; } return $menuBody .'</ul>'; } ```