`
sanshizi
  • 浏览: 85710 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

一个下拉菜单效果的实现

阅读更多
先前只是记录, 说的不够清楚,当然现在仍可能不够清晰. 阅读此方法前提是你已经对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()});
如果二级菜单中存在超级链接, 鼠标在二级菜单上面移动会导致其隐藏,
使用此方法可以防止这种情况发生
0
2
分享到:
评论
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  
你想说明什么?

相关推荐

    vue实现带过渡效果的下拉菜单功能

    在本文中,将详细介绍如何使用Vue.js框架来实现一个带有过渡动画效果的下拉菜单功能。这个功能不仅适用于Web端,还包括对移动端的适配,并且还包含了一些额外的交互效果,比如点击下拉菜单之外的区域隐藏下拉菜单。 ...

    C#下拉菜单的实现

    本文将深入探讨如何在C# Winform中实现下拉菜单,并通过一个基础实例进行详细解释。 首先,下拉菜单在C#中通常由ComboBox控件来实现。ComboBox控件结合了文本框和列表框的功能,允许用户输入文本或从下拉列表中选择...

    下拉菜单的实现

    实现一个下拉菜单主要涉及到HTML、CSS和JavaScript(有时也会用到jQuery或其他库)这三个核心技术。 首先,我们需要理解HTML的基础结构。在HTML中,下拉菜单通常由`&lt;select&gt;`标签创建,其内部包含一系列`&lt;option&gt;`...

    网页下拉菜单3种实现

    创建一个基础的下拉菜单结构,可以使用以下代码: ```html &lt;li&gt;&lt;a href="#"&gt;菜单项1 &lt;li&gt;&lt;a href="#"&gt;子菜单项1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单项2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单项2&lt;/a&gt;&lt;/li&gt; ``` ...

    CSS+JavaScript分别实现下拉菜单效果

    文件"CSS和JavaScript分别实现下拉菜单效果"应该包含了具体的代码示例,可以帮助初学者理解这两种技术如何协同工作来创建下拉菜单。 总之,理解和掌握CSS与JavaScript在下拉菜单中的应用,不仅有助于提升网页的用户...

    jq实现下拉菜单效果 jq二级菜单效果.zip

    本示例将探讨如何使用jQuery实现一个二级下拉菜单的效果。 首先,我们需要理解HTML基础结构。一个简单的下拉菜单通常包含一个父级`&lt;ul&gt;`元素,用于承载一级菜单项,每个一级菜单项是一个`&lt;li&gt;`元素。在需要二级菜单...

    下拉菜单集合(二级、三级下拉菜单)

    下拉菜单在网页设计和应用程序开发中是一种常见的交互元素,用于提供多个选择项,并通过点击主菜单项展开显示。在本资源包“下拉菜单集合”中,包含了多种类型的下拉菜单,包括二级和三级下拉菜单,这些设计通常用于...

    19个js下拉菜单效果

    本文将围绕"19个js下拉菜单效果"这一主题,深入探讨js在下拉菜单设计中的应用。 1. 基础实现:一个简单的js下拉菜单通常由HTML结构、CSS样式和JavaScript逻辑组成。HTML定义菜单的层次结构,CSS负责样式布局,js则...

    Qt简单方法实现下拉列表菜单

    在这个场景中,我们可以使用`QPushButton`和`QWidget`来构造一个简单的下拉菜单,它允许用户展开多级菜单进行选择。下面将详细介绍如何实现这样的功能。 首先,我们需要理解`QPushButton`是Qt提供的一种基本控件,...

    css实现下拉菜单

    css实现下拉菜单,鼠标移动到上面就可以显示下面的子菜单

    19种下拉菜单导航效果

    19种不同的下拉菜单效果涵盖了多种样式和动画效果,例如平滑展开、淡入淡出、滑动显示、旋转弹出等。每一种效果都是通过精心设计的CSS样式和JavaScript逻辑来实现的。开发者可以通过分析源代码,学习如何控制元素的...

    jquery实现下拉菜单效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个下拉菜单效果。下拉菜单是网页交互设计中的常见元素,常用于导航菜单,帮助用户轻松访问网站的各个部分。以下是一步步教你如何创建这样的功能。 首先,我们需要...

    仿QQ下拉菜单效果仿QQ下拉菜单效果

    QQ下拉菜单效果是网页设计中一种常见的交互元素,它为用户提供了一种便捷的方式来访问或操作网站的二级或更深层次的导航菜单。这种效果在许多应用程序和网站中都有所应用,尤其是在社交网络平台如QQ中,它使得用户能...

    通用无限极下拉菜单的实现代码

    通用无限极下拉菜单的实现是一种常见的前端技术,主要应用于网站导航栏的构建,以提供层次清晰、操作便捷的用户体验。下面我们将详细探讨如何实现这样一个功能,并介绍其核心特点。 首先,我们需要了解下拉菜单的...

    jquery实现下拉菜单

    通过这种方式,我们已经实现了基本的下拉菜单效果。 为了增强用户体验,我们还可以添加一些额外的功能,比如点击主菜单项时保持子菜单的显示状态,或者为子菜单项添加点击事件。例如: ```javascript $('.dropdown...

    swift-点击出现的下拉菜单简单设置数据源就可以实现效果

    在本篇文章中,我们将深入探讨如何使用Swift来创建一个点击后显示下拉菜单的控件,并通过简单设置数据源来实现这一效果。 首先,我们要了解Swift中的下拉菜单其实是一种自定义视图,通常基于UIView或者...

    Jquery实现下拉菜单

    一个简单的下拉菜单通常由一个主菜单项和一组子菜单组成。HTML代码可能如下所示: ```html 菜单项1 子菜单1-1 子菜单1-2 菜单项2 子菜单2-1 子菜单2-2 ``` 接下来,我们需要引入jQuery库...

    年、月、日三级联动下拉菜单

    本文将详细介绍如何使用JavaScript实现一个简单的年、月、日三级联动的下拉菜单,并解释其工作原理。 #### 二、技术背景 在网页开发中,下拉菜单是一种常见的UI元素,它可以帮助用户快速选择某个选项。而在某些应用...

    js实现兼容性好的微软官网导航下拉菜单效果

    本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款微软官网导航菜单,兼容好的下拉菜单,微软官网导航效果,在IE6下没有动画效果,顺便也把IE6的效果给加上,...

    19酷比较酷的js下拉菜单效果

    本资源"19酷比较酷的js下拉菜单效果"聚焦于利用JavaScript实现一种独特的、具有吸引力的下拉菜单效果,为网页增添超酷的视觉体验。 JavaScript是一种广泛应用于网页动态效果的编程语言,它允许开发者通过代码控制...

Global site tag (gtag.js) - Google Analytics