您现在的位置：首页 >> 前端 >> 内容

菜单显示与隐藏

时间：2017/8/15 8:54:00 点击：

　　核心提示：有三个标题菜单，点击其中一个，可以显示其下的隐藏的元素，点击另一个标题菜单，刚才显示的元素能收起，只显示点击的标题菜单的元素html:bodyp id=menudl id=dl1dt学生管理/dtdd...

有三个标题菜单，点击其中一个，可以显示其下的隐藏的元素，点击另一个标题菜单，刚才显示的元素能收起，只显示点击的标题菜单的元素

html:

<body>
        <p id="menu">
            <dl id="dl1">
                <dt>学生管理</dt>
                <dd>添加学员</dd>
                <dd>学员列表</dd>
                <dd>修改学生信息</dd>
                <dd>删除学员</dd>
            </dl>
            <dl id="dl2">
                <dt>老师管理</dt>
                <dd>添加学员</dd>
                <dd>学员列表</dd>
                <dd>修改学生信息</dd>
                <dd>删除学员</dd>
            </dl>
            <dl id="dl3">
                <dt>工作人员管理</dt>
                <dd>添加学员</dd>
                <dd>学员列表</dd>
                <dd>修改学生信息</dd>
                <dd>删除学员</dd>
            </dl>
        </p>
    </body>

CSS代码：

<style>
            #menu{width: 360px;margin: 0px auto;border: 1px solid #ccc;}
        </style>

JS代码：

<script>
            $(function(){
                $("dd").hide();  //把所有的dd元素隐藏
                $("#dl1").bind("click",function(){
                    $("#dl1 dd").toggle(500);   //点击后显示已隐藏的元素
                    $("#dl4>dd,#dl3>dd,#dl2>dd").hide(500);  //当点击下面的dl时，让上面的dd元素隐藏
                });
                
                $("#dl2").bind("click",function(){
                    $("#dl2 dd").toggle(500);
                    $("#dl4>dd,#dl3>dd,#dl1>dd").hide(500);
                });
                
                $("#dl3").bind("click",function(){
                    $("#dl3 dd").toggle(500);
                    $("#dl4>dd,#dl1>dd,#dl2>dd").hide(500);
                });
            });
        </script>