项目场景:
项目场景:我有个项目是用jQuery+layui实现的左侧的导航栏需要根据一个dom属性的变化实时收缩和展开,起初使用的监控不太灵敏,查资料发现MutationObserver可以实现
问题描述
提示:如图左侧的导航栏可以点击上方的回退图标收起和展开,也可以根据某些条件自动展开,所以会出现内容区和导航栏遮挡的情况,刚开始是如下代码是通过是通过模拟点击此图标LAY_app_flexible为收缩按钮的类,来判断设置内容区理左侧的距离left发现自动收起时不会触发这个就想到自动监控dom的变化
$(document).on('click', '#LAY_app_flexible', function(data) {
var el=$("#LAY_app_flexible").hasClass("layui-icon-shrink-right")
if(!el){
$('#hu_hf').css({'background-image':'url(../../../Content/style/res/timg.png)','background-position': '5px'})
$('.layui-body').css('left','60px')
}else{
$('#hu_hf').css({'background-image':'url(../../../Content/layui/images/tu/220x50.png)','background-position': '0 10px'})
$('.layui-body').css('left','200px')
}
});
解决方案:
提示:因为通过查看dom发现,当收起时,父元素LAY_app上的类会多一个类layadmin-side-shrink,所以监控父元素LAY_app
以下方法完美解决此遮挡问题。
var mut= new MutationObserver(function(a){
a.forEach(function(b){
if($('#LAY_app').hasClass('layadmin-side-shrink')){
$('#hu_hf').css({'background-image':'url(../../../Content/style/res/timg.png)','background-position': '5px'})
$('.layui-body').css('left','60px')
}else{
$('#hu_hf').css({'background-image':'url(../../../Content/layui/images/tu/220x50.png)','background-position': '0 10px'})
$('.layui-body').css('left','200px')
}
})
})
mut.observe($('#LAY_app')[0],{
attributes:true,
characterData:true,
childList:true,
subtree:true,
attributeOldValue:true,
characterDataOldValue:true,
})
总结
MutationObserver用来监视 DOM 变动。DOM 的任何变动,比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。
但是,它与事件有一个本质不同:事件是同步触发,也就是说,DOM 的变动立刻会触发相应的事件;Mutation Observer 则是异步触发,DOM 的变动并不会马上触发,而是要等到当前所有 DOM 操作都结束才触发.
MutationObserver的相关api可借鉴:
MUtationObserver api