使用Jquery的toggle实现页面导航菜单

来源：互联网发布：java和数据挖掘编辑：程序博客网时间：2024/06/01 16:39

注意事项：该案例存在版本问题，需要使用

jquery-1.8.3.min.js

新版本可能无效

页面和CSS代码如下

<!doctype html><html lang="en"><head>   <meta charset="UTF-8"><title>导航特效</title><style type="text/css">*{   margin: 0px;   padding: 0px;   font-size: 12px;}#nav .navsBox{   width: 160px;}#nav .navsBox .firstNav{   height:45px;   line-height:45px;   background-color:#EBEBEB;   border-left:10px solid #FE705C;   padding-left:20px;   width:130px;   font-weight:bold;   cursor: pointer;}#nav .navsBox ul{   display:none;   list-style:none;}#nav .navsBox ul li{   display:block;   height:45px;   line-height:45px;   padding-left:70px;   width:90px;   background:#F2F2F2 33px 7px no-repeat;}#nav .navsBox ul li.jedh{   background-image:url("./images/huan.gif");}#nav .navsBox ul li.jlbbyk{   background-image:url("./images/you.gif");}#nav .navsBox ul li.jwljb{   background-image:url("./images/gouwu.gif");}#nav .navsBox ul li.mrljb{   background-image:url("./images/meiri.gif");}#nav .navsBox ul li.vipjtj{   background-image:url("./images/zhe.gif");}#nav .navsBox ul li.onbg{   background-color:#F9DBD1;}#nav .navsBox ul li a{   color:#000;   text-decoration:none;}.red{    background-color: red !important;}.other{        background-color: #F2F2F2 !important;    }</style>    <script src="js/jquery-1.8.3.min.js"></script>    <script src="js/jquery.js"></script></head><body><div id="nav">    <div class="navsBox">      <div class="firstNav">购物特权</div>      <ul>         <li class="jedh"><a href="#">全额兑换</a></li>         <li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>         <li class="jwljb"><a href="#">购物领金币</a></li>         <li class="mrljb"><a href="#">每日领金币</a></li>         <li class="vipjtj"><a href="#">VIP阶梯价</a></li>      </ul>    </div></div></body></html>

JS代码如下

$(document).ready(function () {    $(".firstNav").toggle(        function(){            $(this).next().show();        },        function(){            $(this).next().hide();        }    );    $("li").hover(function () {        $(this).removeClass("other").addClass("red");    },function () {        $(this).removeClass("red").addClass("other");    });})

阅读全文

1 0