用原生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 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步