js简单的抽屉菜单

最新推荐文章于 2024-04-27 09:45:14 发布

BDS

最新推荐文章于 2024-04-27 09:45:14 发布

阅读量7.6k

点赞数

分类专栏： [技术]JavaScript 文章标签： class div 360 function jquery border

本文链接：https://blog.csdn.net/bdstjk/article/details/6866826

版权

[技术]JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

闲暇时间用Jquery写了一个js简单的抽屉菜单。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>抽屉菜单</title>
    <style type="text/css">
        .MenuPanel
        {
            padding-bottom:20px;
        }
        .MenuTitle
        {
            width:150px;
            height:30px;
            font-size:20px;
            padding-left:10px;
            padding-top:5px;
            background:url(image/index_x.png) repeat-x 0px -673px;
            border:#ffbc66 1px solid;
        }
        .MenuContent
        {
            width:108px;
            font-size:16px;
            padding:20px 10px 20px 40px;
            border:#ffbc66 1px solid;
        }
    </style>

    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".MenuPanel").each(function(){
                $(this).children(".MenuContent").hide();
            });
            
            $(".MenuTitle").each(function(){
                $(this).click(function(){
                    
                    if($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none"){
                        $(this).parents(".MenuPanel").children(".MenuContent").hide("slow");   
                    }else{
                        $(".MenuPanel").each(function(){
                            $(this).children(".MenuContent").hide();
                        });
                        $(this).parents(".MenuPanel").children(".MenuContent").show("slow");
                    }
                });
                
            });
        
        });
    
    
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <div class="MenuPanel">
            <div class="MenuTitle">第一菜单</div>
            <div class="MenuContent">
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
            </div>
        </div>
        <div class="MenuPanel">
            <div class="MenuTitle">第二菜单</div>
            <div class="MenuContent">
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
            </div>
        </div>
        <div class="MenuPanel">
            <div class="MenuTitle">第三菜单</div>
            <div class="MenuContent">
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
            </div>
        </div>
        <div class="MenuPanel">
            <div class="MenuTitle">第四菜单</div>
            <div class="MenuContent">
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
                <a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

下载地址：http://download.csdn.net/detail/bdstjk/3583116

jquery可以自己去官方下载，这里也贴一个：http://download.csdn.net/detail/bdstjk/3649368

效果图：