一个下拉菜单效果的实现

最新推荐文章于 2024-09-11 15:33:18 发布

iteye_5974

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量129

点赞数

分类专栏： Javascript 文章标签： javascript jquery ViewUI

Javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

先前只是记录, 说的不够清楚,当然现在仍可能不够清晰. 阅读此方法前提是你已经对jQuery有一定的使用经验

这个函数实现了一个小功能: 一级下拉菜单的功能, 加入延时机制, 可以防止弹出或隐藏过快, 代码中用的fadeIn,fadeOut是渐显渐隐效果,修改一下就可以实现其他效果.使用中首先要确定两个dom元素, 用css先定位好, 并给这两个加上唯一id或是class做为引用, 然后使用下面这个函数绑定一种鼠标动作来触发即可

简的例子


<div>
    <h1 class="category_a">一级目录</h1>
    <ul class="subcategory_a">
        <li>二级目录1</li>
        <li>二级目录2</li>
        <li>二级目录3</li>
        <li>二级目录4</li>
    </ul>
</div>
<script>
    //只需要一句话即可实现下拉菜单的功能
    showhide(".category_a",".subcategory_a","mouseenter");//第三个参数使用mouseenter, 即"鼠标进入"动作触发二级菜单
    //可以尝试一下其他的方式, 如:click, focus, blur, mouseover
</script>

再来一个实用的


<ul id="nav">
    <li>
        <h1>一级目录a</h1>
        <ul>
            <li>二级目录1</li>
            <li>二级目录2</li>
            <li>二级目录3</li>
            <li>二级目录4</li>
        </ul>
    </li>
    <li>
        <h1>一级目录b</h1>
        <ul>
            <li>二级目录1</li>
            <li>二级目录2</li>
            <li>二级目录3</li>
            <li>二级目录4</li>
        </ul>
    </li>
    <li>
        <h1>一级目录c</h1>
        <ul>
            <li>二级目录1</li>
            <li>二级目录2</li>
            <li>二级目录3</li>
            <li>二级目录4</li>
        </ul>
    </li>
</ul>
<script>
    //第一种绑定方法
    $('#nav li').each(function(){
        //var selector1 = $('h1', this);//如果我这里直接声明变量, 会不会引起内存溢出, 请高手指点
        //var selector2 = $('ul', this);
        showhide($('h1', this), $('ul', this), 'mouseenter'); // mouseenter可以防止闪烁
    });

    //也可以这样绑定
    $('#nav li h1').each(function(){
        //var selector1 = this;
        //var selector2 = $(this).siblings();
        showhide(this, $('ul', $(this).siblings()), 'mouseenter'); // mouseenter可以防止闪烁
    });

    //有
</script>

此方法要求页面已经使用了jQuery库


/**
* 显示隐藏下拉菜单效果
*
* selector1: 当鼠标click 选择器selector1元素时, 显示选择器selector2元素, 当鼠标进入selector2并从selector2上离开时, 200ms内隐藏selector2, 如果在离开selector2又立刻(200ms内)回到selector2上, 则不会关闭
* selector2: 被显示隐藏的dom
* type: 是dom元素响应什么类型的动作(鼠标甚至tab的焦点), 这里使用的字符串是与jquery中on()动作中可以使用的动作相同的, 这里使用click为例
*/

function showhide(selector1, selector2, type){
    var timer = {};
    var key = "___showhide_uuid"
    //取得全局唯一标志符
    var UUID = function(){
        if(!window[key]) window[key] = 1;
        return window[key]++;
    }
    //先检查目标有没有uuid
    var uuid = $(selector1).eq(0).attr(key);
    if(!uuid){
        uuid = UUID();
    }
    //将uuid添加到dom上
    $(selector1).attr(key, uuid);
    $(selector2).attr(key, uuid);
    //确定动作
    type = type || "mouseenter";
    //绑定动作
    var call = function(_this, callback){
        var _uuid = $(_this).attr(key);
        if(timer[_uuid]) clearInterval(timer[_uuid]);
        timer[_uuid] = setTimeout(function(){callback.call();},200);
    }
    $(selector1)[type](function(){
        call(this, function(){$(selector2).fadeIn(100);});
    }).mouseleave(function(){
        call(this, function(){$(selector2).fadeOut(200);});
    });
    $(selector2).mouseenter(function(){
        call(this, function(){});
    }).mouseleave(function(){
        call(this, function(){$(selector2).fadeOut(200);});
    });
}

/*
	使用方法

	showhide(".J_C_Game",".J_C_Game_T","mouseenter");

	showhide(".J_C_Game",".J_C_Game_T","click");

	...

*/