jquery实现nav的下拉
<script type="text/javascript"> $(function(){ //tab_flag 根据此标记判断是否由父级nav指向了nav_list var tab_flag = false; var nav_col = $('.nav_col');var nav_list = $('.nav_list'); var nav_list_col = $('.nav_list_col'); //父级nav 颜色变换 function nav_col_cb(_this,type){ if(type){ _this.addClass('nav_on'); }else{ _this.removeClass('nav_on'); } } //第一个父级nav监听[较特殊，无子nav] nav_col_1.hover( function(){ var _this = $(this); nav_col_cb(_this,1); },function(){ var _this = $(this); nav_col_cb(_this,0); }) //父级nav监听 nav_col.hover( function(){ var _this = $(this); nav_col_cb(_this,1); $(this).next().removeClass('v_hide'); },function(){ var _this = $(this); //timeout 20ms 因为需要时间触发nav列表监听 setTimeout(function(){ if(!tab_flag){ _this.next().addClass('v_hide'); nav_col_cb(_this,0); } },20) }); //nav列表监听 nav_list.hover( function(){ var _this = $(this); _this.addClass('nav_list_on'); tab_flag = true; },function(){ var _this = $(this); tab_flag = false; _this.addClass('v_hide'); nav_col_cb(_this.prev(),0); }) //子nav监听 nav_list_col.hover( function(){ var _this = $(this); _this.addClass('nav_list_on'); },function(){ var _this = $(this); _this.removeClass('nav_list_on'); }) }) </script>
html代码
<style> .v_hide{visibility: hidden;} .nav_on{background: #5b5b5b;} .nav_list_on{background: #5b5b5b;} .nav-box{width:100%;background-color:#333;height:42px;z-index:100} .nav-box .nav_row{width:1080px;margin:0 auto} .nav-box .nav_row .nav_col{color:#fff;width:179px;height:42px;float: left;text-align:center;border-right:1px solid #5b5b5b;font-size:18px;line-height:42px;cursor: pointer;display: block;} .nav-box .nav_list_2{top:42px;left: 180px;width: 180px;z-index: 1000;background:#1f1f1f;cursor: pointer;display: block;} .nav-box .nav_list_3{top:42px;left: 360px;width: 180px;z-index: 1000;background:#1f1f1f;cursor: pointer;display: block;} .nav-box .nav_list_4{top:42px;left: 540px;width: 180px;z-index: 1000;background:#1f1f1f;cursor: pointer;display: block;} .nav-box .nav_list_5{top:42px;left: 720px;width: 180px;z-index: 1000;background:#1f1f1f;cursor: pointer;display: block;} .nav-box .nav_list_6{top:42px;right: 0px;width: 181px;z-index: 1000;background:#1f1f1f;cursor: pointer;display: block;} .nav-box .nav_list_col{cursor: pointer;width: 100%;height: 42px;text-align:center;color:#fff;font-size:14px;line-height:42px;display: block;} <style> <div class="nav-box"> <div class="nav_row rel"> <a href="http://www.puahome.com/" target="_blank" class="nav_col">首页</a> <a href="http://www.puahome.com/bbs/f-54-6-1.html" target="_blank" class="nav_col">聊天</a> <div class="nav_list nav_list_2 abs v_hide"> <a href="http://www.puahome.com/bbs/f-54-6-1.html" target="_blank" class="nav_list_col" style="border-right: none;">聊天话题</a> <a href="http://liaoshenme.puahome.com/" target="_blank" class="nav_list_col" style="border-right: none;">跟女生聊天聊什么</a> <a href="http://www.puahome.com/bbs/f-238-1.html" target="_blank" class="nav_list_col" style="border-right: none;">和女孩子聊天话题</a> <a href="http://www.puahome.com/bbs/f-54-6-1.html" target="_blank" class="nav_list_col" style="border-right: none;">和女孩子聊天技巧</a> </div> <a href="http://nvyou.puahome.com/" target="_blank" class="nav_col">女朋友</a> <div class="nav_list nav_list_3 abs v_hide"> <a href="http://www.puahome.com/bbs/f-237-1.html" target="_blank" class="nav_list_col" style="border-right: none;">怎么交女朋友</a> <a href="http://www.puahome.com/bbs/pua-65490-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">怎么追女朋友</a> <a href="http://www.puahome.com/bbs/pua-69246-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">和女朋友聊天话题大全</a> <a href="http://www.puahome.com/bbs/pua-74834-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">和女朋友聊天的9个小技巧</a> </div> <a href="http://biaobai.puahome.com/" target="_blank" class="nav_col">表白</a> <div class="nav_list nav_list_4 abs v_hide"> <a href="http://www.puahome.com/zhuanti/biaobai" target="_blank" class="nav_list_col" style="border-right: none;">怎么表白</a> <a href="http://www.puahome.com/bbs/f-193-1.html" target="_blank" class="nav_list_col" style="border-right: none;">表白方式</a> <a href="http://biaobai.puahome.com/4929" target="_blank" class="nav_list_col" style="border-right: none;">表白的话</a> <a href="http://www.puahome.com/bbs/pua-19529-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">表白的句子</a> </div> <a href="http://y.puahome.com/" target="_blank" class="nav_col">泡妞秘籍</a> <div class="nav_list nav_list_5 abs v_hide"> <a href="http://www.puahome.com/zhuanti/paoniu" target="_blank" class="nav_list_col" style="border-right: none;">泡妞秘诀</a> <a href="http://y.puahome.com/4202" target="_blank" class="nav_list_col" style="border-right: none;">泡妞攻略</a> <a href="http://www.puahome.com/bbs/f-48-1.html" target="_blank" class="nav_list_col" style="border-right: none;">泡妞视频</a> <a href="http://www.puahome.com/bbs/f-119-159-1.html" target="_blank" class="nav_list_col" style="border-right: none;">泡妞秘籍书籍下载</a> </div> <a href="http://www.puahome.com/bbs/f-54-109-1.html" target="_blank" class="nav_col">搭讪</a> <div class="nav_list nav_list_6 abs v_hide"> <a href="http://www.puahome.com/bbs/pua-743-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">搭讪技巧</a> <a href="http://www.puahome.com/bbs/pua-1433-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">搭讪开场白</a> <a href="http://www.puahome.com/bbs/pua-68509-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">搭讪的法则</a> <a href="http://www.puahome.com/bbs/pua-1756-1-1.html" target="_blank" class="nav_list_col" style="border-right: none;">搭讪圣经</a> </div> </div> </div>
