您的位置：首页 > Web前端 > JQuery

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

2017-09-18 15:09 831 查看

用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')
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航