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>
时间： 2024-12-21 09:00:00

jquery实现nav的下拉的相关文章

jQuery自定义漂亮的下拉框插件8种效果演示

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en" class=

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(docum

JQuery -&gt; 超级简单的下拉菜单

1. create a new accout, create orginazation, create repo 2. install git in your local pc Note: you can create ssh key to avoid username/password input for github operation https://help.github.com/articles/generating-ssh-keys https://help.github.com/a

jQuery cxSelect 多级联动下拉菜单

随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQuery 多级联动菜单插件.它适用于各省.动菜单. 列表数据通过 AJAX 获取(须要在server环境执行),也能够使用变量自己定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点须要学

jquery如何删除select下拉菜单中所有的option项

jquery如何删除select下拉菜单中所有的option项:在实际应用中,有可能要求一次性删除所有的select下拉菜单的option选项,方法非常的简单.select下拉菜单: <select id="mayi"> <option value="1">蚂蚁部落一</option> <option value="2">蚂蚁部落二</option> </select> 删除

jquery选中将select下拉框中一项后赋值给text文本框

jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件.所以无法进行赋值给文本框 解决方法. select下拉框设置第一项做一个无用的占位option <script type="text/javascript">     function changeSelect(obj) {         var _this = obj;  

自制jquery可编辑的下拉框

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致

jQuery实现简单的下拉可输入组合框

[写在前面的话]网站上很多用各种插件,比如依赖bootstrap的bootstrap-select插件等.虽然这些框架可以实现很多功能,但因为在实际项目中,可能只会用到其中的某个功能,若是一概引入,会导致整个js加载过于笨重.比如前面提到的bootstrap-select插件,在不压缩的情况下,达到300多k.因此,为了实现一个可填写的下拉框有点得不偿失. 基于这种原因,于是私下用jquery写了一个比较简单的下拉可填写组合框. CSS code: 1 .container{ 2 margin: