Question

我右边有一个图像，左边是div。现在我想隐藏图像，它应该只在div高度达到650px时出现。

我做了一些谷歌搜索，并提出可以使用jquery中的if else语句来实现。但是没有找到正确的突破。

请建议。

Answer 1

你可以在你的css文件中使用媒体查询，首先不需要jquery

@media(max-height:650px){
 #img-id{
  display:none;
 }
}

但是，由于你认为它是一个div元素，你可以使用jquery

如本问题所述 jquery resize listener on a div

正如poelinca提供的那样，有一些很好的插件可用于此功能。

如果您不喜欢插件的想法，另一个简单的解决方案是在修改内容时简单地在div上触发“resize”事件。然后你可以使用一个优雅的观察者模式，使用resize（）按预期监视它。

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

所以我会将其修改为

    function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
if( $('divLeft').height() >= 650){ 
    $("#img-id").hide();
  }
else {
$("#img-id").show();
}

});

Answer 2

您可以使用.toggle()执行此操作：

$('img').toggle(function(){
     return $('divLeft').height() >= 650;
});

Answer 3

如果你使用媒体查询，你可以做这样的事情..

@media(min-height:650px){
 #image-id{
  visibility: visible
 }
}

并在媒体查询外部或在@media(min-height:650px)行内，提供

#image-id{
  visibility:hidden
 }

希望会有所帮助....

使用jquery更改div高度时显示图像

3 个答案: