jquery 展开折叠菜单

最新推荐文章于 2021-10-13 16:41:06 发布

weixin_30681615

最新推荐文章于 2021-10-13 16:41:06 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/5170738.html

本文介绍了一个使用jQuery实现的菜单展开与折叠效果示例。通过简单的HTML结构与jQuery结合，可以轻松实现网页导航菜单的交互功能。初始状态下，除第一个菜单外，其余菜单均处于隐藏状态，点击带有特定样式的菜单项时，会触发点击事件，隐藏当前显示的所有子菜单，并展示被点击菜单项对应的子菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 展开折叠菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在此处插入标题</title>
<style>
div {
    width: 200px;
    line-height: 30px;
    font-size: 14px;
    padding-left: 15px;
    border: 1px solid #6699cc;
}

.menu {
    height: 30px;
    background-color: #6699cc;
    color: white;
    font-weight: bold;
}
</style>
<script language='javascript' src='../jQuery/jquery.js'></script>
<script>
    $().ready(function() {

        //将所有菜单隐藏
        $('.menu + div').hide();
        
        //展开第一个菜单
        $('#m1 + div').show();

        //绑定使用menu样式的div的点击事件
        $('.menu').bind('click', function() {
            
            //关闭所有菜单
            $(".menu + div").hide();
            
            //点击哪个menu，就取得它的id
            var id = this.id;
            
            //找到它后面相邻的div
            $('#' + id + '+ div').toggle();
        });
    });
</script>
</head>
<body>
    <div id='m1' class='menu'>商品管理</div>
    <div>
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
    <div id='m2' class='menu'>商品管理</div>
    <div>
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
    <div id='m3' class='menu'>商品管理</div>
    <div>
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
    <div id='m4' class='menu'>商品管理</div>
    <div>
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/gyz418/p/5170738.html