旁观自己 善待朝夕|

猫老板的豆

园龄:9年4个月粉丝:52关注:0

用原生javascript写出jquery中slideUp和slideDown效果

用on给动态添加的元素绑定hover事件,没有生效的解决

经常要动态加载dom节点,加载之后的节点当然也会有一些绑定事件的需求,今天给一个事件绑定hover,用jQuery,竟然没有生效。先上没有生效的代码

$('ul').on('hover','li',function(){ 
      // mouseenter dosomething 
},function(){
      // mouseleave dosomething
});

问题出在哪里了?
先看语法

$(selector).on(event,childSelector,data,function,map) 

很明显了,在传递到里面的参数中,只看到可以传一个function,而这里传了两个函数


决解方法一:

用原生javascript写出jquery中slideUp和slideDown效果

<body>
	<header id="header" style="height: 60px;background-color: #272c35;"></header>	
	<input type="button" id="ipt_btn" value="slide" />
	<script type="text/javascript">
		var slide = {		
			down : function(div){
				div.style.height='60px';
			},				
			up : function(div){
				div.style.height='0';
			}
		}
		
		function toggleSlide(id,s){
			var div = document.getElementById(id),
			div_height = div.offsetHeight;
			div.style.transition='height '+s+'ms';	
			div.style.overflow='hidden';					
			if(div_height){
				slide.up(div);
			}else{
				slide.down(div);
			}
		}

		document.getElementById('ipt_btn').addEventListener('click',function(){
			toggleSlide('header','500')
		});
		
	</script>
</body>

决解方法二:

绑定 mouseenter mouseleave 两个事件

 $('ul').on('mouseenter mouseleave','li',function(){
     $(this).stop().slideToggle('fast')
 })

本文作者:猫老板的豆

本文链接:https://www.cnblogs.com/bingcola/p/16499315.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   猫老板的豆  阅读(249)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.