js和jQuery写简单下拉菜单

1.jQuery写法

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<style type="text/css">
    *{ margin:0px; padding:0px;}
    #menu{width:100px; height:35px; font-family:'微软雅黑'; background-color:#0C6; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff;}
    #menu:hover{cursor:pointer;}
    .menu1{width:100px; height:35px; font-family:'微软雅黑'; background-color:#FC0; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff; list-style:none; }
    #menu1{margin:0px; width:100px; padding:0px; display:none;}
    .menu1:hover{ cursor:pointer; background-color:#F93}
    /*橘子*/
    #jz{ position:absolute;  left:100px; top:70px; display:none;}
    .jz1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
    .jz1:hover{ cursor:pointer; background-color:#0F3}
    /*香蕉*/
    #xj{ position:absolute;  left:100px; top:105px; display:none; }
    .xj1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
    .xj1:hover{ cursor:pointer; background-color:#0F3}
    /*苹果*/
    #pg{ position:absolute;  left:100px; top:35px; display:none; }
    .pg1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
    .pg1:hover{ cursor:pointer; background-color:#0F3}
</style>
</head>

<body>
    <div id="menu" class="menu" >菜单</div>
        <ul id="menu1">
            <li class="menu1">苹果
                <ul id="pg" class="pg">
                    <li class="pg1">淡绿</li>
                    <li class="pg1">草绿</li>
                    <li class="pg1">绿色</li>
                </ul>
            </li>
            <li class="menu1">橘子
                <ul id="jz" class="jz">
                    <li class="jz1">橘黄</li>
                    <li class="jz1">橘红</li>
                    <li class="jz1">绿色</li>
                </ul>
            </li>
            <li class="menu1">香蕉
                <ul id="xj" class="xj">
                    <li  class="xj1">黄色</li>
                    <li class="xj1">柠檬黄</li>
                    <li class="xj1">土黄</li>
                </ul>
            </li>
            <li class="menu1">葡萄</li>
            <li class="menu1">菠萝</li>
        </ul>
    
        

</body>
    <script type="text/jscript">
        $(document).ready(function(e) {
            
            $("#menu").mouseover(function(e){
                $("#menu").css("background-color","#093");
                $("#menu1").css("display","block");
                });
            
            $("#menu").mouseout(function(e){
                $("#menu").css("background-color","#0C6");
                $("#menu1").css("display","none");
                });
            
            $(".menu1").mouseover(function(e){
                $("#menu1").css("display","block");
                $(this).children(".jz").css("display","block"); 
                //(this).children(".jz"):this代表是“.menu1”这个选择器，后面的children（）代表的是".menu"下面的直接子元素
                $(this).children(".xj").css("display","block"); 
                $(this).children(".pg").css("display","block"); 
                });
            
            $(".menu1").mouseout(function(e){
                $("#menu1").css("display","none");
                $(this).children(".jz").css("display","none");
                $(this).children(".xj").css("display","none"); 
                $(this).children(".pg").css("display","none");
                });
                
        });
    
    </script>
</html>

2.js写法:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#fx
{
    width:100px; 
    height:30px;
    background-color:#60F;
    color:white;
    font-weight:bold;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
}
#fx:hover
{
    cursor:pointer;
    background-color:#639;
}
#menu
{
    width:100px;
}
.f
{
    width:100px;
    height:30px;
    background-color:#F06;
    color:white;
    font-weight:bold;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
}
</style>
</head>

<body>
<div id="fx" onmouseover="showlist()" onmouseout="hidelist()">分类</div>
<div id="menu" style="display:none" onmouseover="showlist()" onmouseout="hidelist()">
    <div class="f">家电</div>
    <div class="f">数码</div>
    <div class="f">手机</div>
    <div class="f">衣服</div>
</div>
</body>
<script type="text/javascript">
function showlist()
{
    document.getElementById("menu").style.display="block";
}
function hidelist()
{
    document.getElementById("menu").style.display="none";
}
</script>
</html>

 

posted @ 2015-08-25 09:44  Franky2015  阅读(441)  评论(0)  编辑  收藏  举报