js实现导航菜单效果

来源：互联网发布：淘宝店铺数据在哪里编辑：程序博客网时间：2024/05/06 11:15
<script type="text/javascript">$(document).ready(function(){var temp;var nva_popitems = $(".nva ul li .nva_pop").hover(function(){if(temp){window.clearTimeout(temp);}var _self = $(this);var _index = nva_popitems.index(_self);nva_popitems.hide();nva_baritems.removeClass("hover");nva_baritems.eq(_index).addClass("hover");_self.show();},function(){temp = window.setTimeout(function(){nva_popitems.hide();nva_baritems.removeClass("hover");},100);});var nva_baritems = $(".nva ul li .nva_bar").hover(function(){if(temp){window.clearTimeout(temp);}var _self = $(this);var _index = nva_baritems.index(_self);nva_baritems.removeClass("hover");_self.addClass("hover");nva_popitems.hide();nva_popitems.eq(_index).show();},function(){temp = window.setTimeout(function(){nva_popitems.hide();nva_baritems.removeClass("hover");},100);});});</script><div class="nva">        <ul>            <li><a href="#" class="nva_bar">产品与服务</a>                <div class="nva_pop" style="display:none;">                    <dl>                        <dd><a href="#">注册与变更</a>                            <span class="son_pop">                                <i><a href="#" class="none">社保公积金办理</a></i>                                    <i><a href="#" class="none">企业VI设计</a></i>                                    <i><a href="#" class="none">法律服务</a></i>                                    <i><a href="#" class="none">高新软件企业申请</a></i>                                </span>                            </dd>                            <dd><a href="#">记账与报税</a></dd>                            <dd><a href="#" class="none">商标专利版权</a></dd>                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>                        </dl>                    </div>                </li>                <li><a href="#" class="nva_bar">管家服务</a>                <div class="nva_pop" style="display:none;">                    <dl>                        <dd><a href="#">注册与变更</a>                            <span class="son_pop">                                <i><a href="#" class="none">社保公积金办理</a></i>                                    <i><a href="#" class="none">企业VI设计</a></i>                                    <i><a href="#" class="none">法律服务</a></i>                                    <i><a href="#" class="none">高新软件企业申请</a></i>                                </span>                            </dd>                            <dd><a href="#">记账与报税</a></dd>                            <dd><a href="#" class="none">商标专利版权</a></dd>                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>                        </dl>                    </div>                </li>                <li style="background:none;"><a href="#" class="nva_bar">创业与经营</a>                <div class="nva_pop" style="display:none;">                    <dl>                        <dd><a href="#">注册与变更</a>                            <span class="son_pop">                                <i><a href="#" class="none">社保公积金办理</a></i>                                    <i><a href="#" class="none">企业VI设计</a></i>                                    <i><a href="#" class="none">法律服务</a></i>                                    <i><a href="#" class="none">高新软件企业申请</a></i>                                </span>                            </dd>                            <dd><a href="#">记账与报税</a></dd>                            <dd><a href="#" class="none">商标专利版权</a></dd>                            <dd style="border-bottom:none;"><a href="#"  class="none">高新软件企业申请</a></dd>                        </dl>                    </div>                </li>            </ul>        </div>
0 0