一个下拉菜单效果的实现

先前只是记录, 说的不够清楚,当然现在仍可能不够清晰. 阅读此方法前提是你已经对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");
	
	...
	
*/

总结一下: 此方法的存在价值就在于使用了延时机制, 可以大提升使用体验
如: 一般的方法: $(二级菜单).mouseout(function(){$(this).hide()});
如果二级菜单中存在超级链接, 鼠标在二级菜单上面移动会导致其隐藏,
使用此方法可以防止这种情况发生

评论

5 楼 sanshizi 2013-01-09  

1927105 写道

写文档的能力有待提高啊

现在如何

4 楼 sanshizi 2013-01-09  

jacking124 写道

看着不是很明白的

加入了说明

3 楼 jacking124 2012-10-12  

看着不是很明白的

2 楼 1927105 2012-10-11  

写文档的能力有待提高啊

1 楼 TXterran 2012-10-11  

你想说明什么？