jquery 展开折叠菜单 | 展开折叠菜单

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>