用原生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')
 })
posted @ 2022-07-20 18:17  猫老板的豆  阅读(241)  评论(0)  编辑  收藏  举报