学习JQUERY,写的简单下拉菜单！

来源：互联网发布：快递怎么找淘宝货源编辑：程序博客网时间：2024/05/21 09:01

HTML代码：

<!DOCTYPE html><html>    <head>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>        <title>side menu</title>    </head>    <body>        <div id="menu">            <div class="m-one">                <span class="m-tit">主菜单01</span>                <ul class="m-ul">                    <li class="m-li">子菜单11</li>                    <li class="m-li">子菜单12</li>                    <li class="m-li">子菜单13</li>                </ul>            </div>            <div class="m-one">                <span class="m-tit">主菜单02</span>                <ul class="m-ul">                    <li class="m-li">子菜单21</li>                    <li class="m-li">子菜单22</li>                    <li class="m-li">子菜单23</li>                </ul>            </div>            <div class="m-one">                <span class="m-tit">主菜单03</span>                <ul class="m-ul">                    <li class="m-li">子菜单31</li>                    <li class="m-li">子菜单32</li>                    <li class="m-li">子菜单33</li>                </ul>            </div>            <div class="m-one">                <span class="m-tit">主菜单04</span>                <ul class="m-ul">                    <li class="m-li">子菜单41</li>                    <li class="m-li">子菜单42</li>                    <li class="m-li">子菜单43</li>                </ul>            </div>            <div class="m-one">                <span class="m-tit">主菜单05</span>                <ul class="m-ul">                    <li class="m-li">子菜单51</li>                    <li class="m-li">子菜单52</li>                    <li class="m-li">子菜单53</li>                </ul>            </div>        </div>    </body></html>

CSS代码：

#menu {}.m-one {float:left;width:100px;height:40px;line-height:40px; text-align:center; background:#eeeeee;}.m-one:hover{background:#dddddd;}ul,li {list-style:none; margin:0;padding:0;}.m-ul {background:#dddddd; display:none;}.m-li {font-size:12px; height:25px; line-height:25px;}.m-li:hover {background:#cccccc;}

JQUERY代码：

$(document).ready(function() {                $('.m-one').hover(                    function(){$(this).children('.m-ul').slideDown(200);},                    function(){$(this).children('.m-ul').slideUp(200);}                );            });