后台管理左侧菜单

看代码吧:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .item .header{
            height:35px;
            background-color:blue;
            color:white;
            line-height:35px;
        }
    </style>
</head>
<body>
    <div style="height;48px"></div>
    <div style="width:300px">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu(‘i1‘);">菜单1</div>
            <div class="content">
                <div>内容1.1</div>
                <div>内容1.2</div>
                <div>内容1.3</div>
            </div>
        </div>

        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu(‘i2‘);">菜单2</div>
            <div class="content hide">
                <div>内容2.1</div>
                <div>内容2.2</div>
                <div>内容2.3</div>
            </div>
        </div>

        <div class="item">
            <div id="i3"class="header" onclick="ChangeMenu(‘i3‘);">菜单3</div>
            <div class="content hide">
                <div>内容3.1</div>
                <div>内容3.2</div>
                <div>内容3.3</div>
            </div>
        </div>

        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu(‘i4‘);">菜单4</div>
            <div class="content hide">
                <div>内容4.1</div>
                <div>内容4.2</div>
                <div>内容4.3</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(nid){
            var current_header=document.getElementById(nid);
            var item_list=current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
            var current_item=item_list[i];
            current_item.children[1].classList.add(‘hide‘);
            }
            current_header.nextElementSibling.classList.remove(‘hide‘);
        }
    </script>

</body>
</html>

运行结果:点谁谁就展开

时间: 2024-10-12 04:16:49

后台管理左侧菜单的相关文章

JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

1 <!DOCTYPE html> 2 <!--示例之模态对话框--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .c1{ 12 position: fixed; 13 lef

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

html: <div class="col-sm-3 col-md-2 sidebar"> <div class="totalt"><a>系统管理系统</a></div> <ul class="menu"> <li class="title"> <a class="item item1"><span cla

Ecshop(二次开发) - 后台添加左侧菜单导航

1.链接地址:修改 admin\includes\inc_menu.php 文件. $modules['17_syn_data']['view_syn']        =    'synchronization_cat_data.php?act=main'; 2.语言文字:修改 languages\zh_cn\admin\common.php 文件. /* 菜单分类部分 */ $_LANG['17_syn_data'] = '数据同步管理'; /*同步数据 */ $_LANG['view_sy

利用cookie,实现刷新页面跳转,左侧菜单点击后状态保持不变。

是一个后台关系系统,后台是phyton,后台把左侧菜单都是利用a标签进行跳转,导致菜单点击状态在页面刷新后失效,用户体验不好,被要求改掉. 查了一些资料.利用cookie终于搞定了这个大问题.主要利用 cookie记录存值. 代码贴上去,以防忘掉 $(".nav-item li a").click(function(){ $.cookie("navstation", $(this).html(), { path: "/" }); }); var

BBS(仿博客园系统)项目05(后台管理功能实现:文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像)

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

WordPress 在后台管理菜单中使用Dashicons图标

主题或插件开发者,也应该与时俱进,今天就简单说说如何在后台管理菜单中使用Dashicons图标. 关于 Dashicons Dashicons 是一个开源的字体图标项目,目前托管于 GitHub,目前主要用于 WordPress 后台,当然, 你也可以在自己的主题或插件中使用.更多的介绍,请访问http://melchoyce.github.io/dashicons/.你可以点击任何一个图标,然后就可以获取它对应的 HTML.CSS 或 Glyph 调用方法. 在菜单中使用 Dashicons

今天在做后台管理系统的无刷新左侧菜单,遇到两个难题:(CTE递归查询、ashx+Session[])

今天在做后台管理系统的无刷新左侧菜单,遇到两个难题: 1.怎么将数据表中的菜单项按树形结构进行层次性的查询?群里有人给我指点说用CTE递归查询,我还没搞明白. 2.要做左侧导航栏的根据用户权限的无刷新加载时,要用到AJAX,那么就要在ashx一般处理程序中取得Session["UserID"]的值,但是ashx中是不能用Session的,之后找到一篇文章,指出:若要在ashx中使用Session和Request需要引入一个接口. 在ashx文件中使用Session和QueryStrin

discuzx3.2后台管理菜单定制,管理菜单二次开发,discuzx3.2后台管理菜单自定义

discuzx3.2后台管理菜单定制,管理菜单二次开发 详情请参考:http://www.infosz.com/forum.php?mod=viewthread&tid=199 第一步:source\admincp\menu下添加 menu_infosz.php,内容如下: 第二步:source\admincp目录下添加admincp_infosz.php 文件,内容如下: 第三步: source\language\lang_admincp_menu.php添加如下内容: 第四步:source\

【小白到大牛之路】交换机后台管理之登录菜单

交换机后台管理之登录菜单 项目需求 用户打开交换机后台管理程序时,需要进行"登录"操作,以确认用户身份的合法性.所以,我们需要先实现一个登录菜单,以提示用户执行相关操作. 项目实现 启动命令窗口:在运行窗口输入notepad++,再单击"确定". 设置notepad++的语言为C语言: 设置notepad++的编码为ANSI格式编码(便于再CMD中显示中文) main.c #include <stdio.h> int main(void) {// 打印登