点击后出现下拉菜单,在其它任意地方单击后就会消失隐藏的下拉菜单的制作方法及原理[附在线实例]亲测 原创

文章标签: 菜单特效
  • :
  • 05-26 21:44
  • :
  • 161次
  • :
  • 0条
  • 2赞

简介jquery制作的一个下拉菜单特效,当第一次点击时会显示下拉菜单,而再次点击,或在网页的其它任意地方点击时,就会消失隐藏,这篇文章详细介绍了实现这个效果的原理和步骤,并且有完整的在线实例演示。l

我们经常在网上会看到这样的一个特效,就是当点击一个按钮或菜单时,会出现它的子菜单,而再次点击时就会消失隐藏,并且在网页的其它任意地方点击都会消失和隐藏。

在jquery里,我们要实现这样的一个效果其实是非常简单的:


我们都知道在jquery里,如果制作一个点击后消失或隐藏的下拉菜单是非常简单的,难点就是要实现点击网页里任意一个地方都会隐藏下拉菜单,而要实现这个效果就要用到jquery里的以下几个函数和方法了:

one:为元素绑定一个一次性的事件,如:

$("#aijquery").one("click",function(){alert("欢迎来到爱jquery www.aijquery.cn");})

我们用上面这个one方法给网页的document对象绑定一个一次性的事件,用来隐藏显示出来的下拉菜单,但是这同时出现了一个问题,因为大家都知道js里会有“冒泡”的现象,[关于冒泡,可以看这里:什么叫事件“冒泡”,及jquery里阻止事件冒泡的方法和实例],因此我们还需要用到阻止冒泡的方法:

event.stopPropagation();

好了,要实现我们的效果里的相关思路和难点都已经解释清楚了,我们来看下面的具体代码:

$("#btn").click(function(e){  	
    e.stopPropagation();//阻止冒泡	
    $("#btncon").toggle();  //切换子菜单的显示或隐藏状态	
    if($("#btncon").is(":visible")){    //判断子菜单是否可见   
        $(document).one("click",function(){     //如果可见就为documnet对象绑定个一次性的单击事件      	
            $("#btncon").hide();       
        });	
    }
});

另外,如果我们要实现,在点击子菜单时,不要隐藏子菜单,只用在子菜单上阻止冒泡就行了:

//加上下面这一句 可以实现点击下拉菜单时 菜单不会消失隐藏
$("#btncon").on("click",function(e){
e.stopPropagation();
})


上面代码里,站长也备注的非常清楚的,相信看到这篇文章的朋友们,都能掌握自己动手写出“点击任意地方就会隐藏的下拉菜单”特效,下面是站长准备的一个在线实例演示:

点击其它地方就会消失的下拉菜单在线演示

本文首发:爱jquery www.aijquery.cn 希望这篇文章能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-19 15:37:17