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>

 

posted @ 2016-01-30 11:29  gyz418  阅读(342)  评论(0)    收藏  举报