Question

我有一个通过CSS媒体查询显示/隐藏的div。

我希望在此div变为可见时触发JQuery调用 - 如果div从

更改，则触发一次

display: none;

到

display: block;

这可能吗？

类似于onclick调用，但在div属性上更改为可见？

$(document).on('click', '#mydiv', function() {
}

Answer 1

更新以在页面加载时处理

使用window.matchMedia()与div使用的规则变为可见，并按事件matches属性设置相关事件监听器过滤。

这里有一个示例，但您必须使用自己的媒体查询规则。

var widthMatch = window.matchMedia("(min-width:500px)");
if(widthMatch.matches) {
  divIsVisible();
}
widthMatch.addListener(function(e){
  if(e.matches) {    
    divIsVisible();
  }
});

function divIsVisible(){
  console.log('DIV is visible!')
}

-jsFiddle-

Answer 2

$(document).ready(function(){
function myFunction(){
setTimeout(function(){ console.log('foo foo') }, 2000)
}
$(document).click(function(){
$('#demo').css('display','block');
//after div is visible myFunction is triggered
myFunction();
})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>click</h1>
<div id='demo' style='display:none'>
<p>hello world</p>
</div>

Answer 3

您可以使用$(window).resize()检测所需元素上的这些css display更改：

$(window).resize(function() {
  var divDisplay = $('.mobileHide').css("display");
  if (divDisplay === "block") {
    $('.status').css('display', 'block');
    //do stuff
  } else {
    $('.status').css('display', 'none');
  }
});

See resizable fiddle

JQuery - 触发对div的调用变得可见

3 个答案:

-jsFiddle-