Question

我只想获取div元素的高度，并隐藏另一个包含给定最大高度的div。如果不显示div。所以我尝试了这种方式。

在其他条件下，将我的最大身高分配给一个变量。

var tallest = 60;

 if (height > tallest) {
     $('van-page-read-more').hide();
  }

   else {
    $('van-page-read-more').show();
  }

根本不工作。我在这里想念什么？

Answer 1

您有2期

1）您没有设置高度变量

2），您必须在

之前添加.

$('.van-page-read-more').hide();

$('.van-page-read-more').click(function() {
  $(".campervan-info-list").toggleClass("campervan-info-expand");
});

var tallest = 60;
if ($(".campervan-info-list").height() > tallest) {
  $('.van-page-read-more').hide();
} else {
  $('.van-page-read-more').show();
}

.campervan-info-expand {
  max-height: 50px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campervan-info-list campervan-info-expand">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, orci sed faucibus semper, ante risus auctor ligula, ultricies cursus odio nulla ac leo. Vivamus auctor volutpat porta. Morbi venenatis luctus turpis, quis laoreet ante bibendum sit
  amet. Aliquam vel massa sed orci gravid

  <br>

  <br>lectus id commodo. Aliquam ultricies justo et magna porttitor tincidunt. Nam ut condimentum turpis. Praesent rutrum ut turpis non finibus. In eu egestas augue, vitae viverra mi. Nunc molestie enim est, luctus volutpat ante laoreet interdum. Proin
  id fermentum magna. Sed semper mauris urna, non pulvinar quam rhoncus ut. Integer ultrices sodales odio vitae pharetra. Duis a enim nec velit rhoncus pharetra eu a sapien. Donec sem enim, ornare vitae tellus eu, porta ultricies ligula. Suspendisse in
  nisi a metus sagittis iaculis. Nullam eu eros eu urna
  <br> lacinia lacinia. Quisque pharetra metus neque, in venenatis sem scelerisque eu. Proin blandit, purus vel volutpat scelerisque, ex orci varius nunc, ut consequat turpis mauris non magna. Mauris pellentesque mauris mi, e
</div>
<br>
<a class="van-page-read-more">Read more</a>

Answer 2

您可以使用此代码。

$("div.class").each(function() {
  if($(this).height() > tallest) {
     $(this).hide();
  }
  else {
    $(this).show();
  }
});

Answer 3

没有足够的声誉来评论@Just代码解决方案。您需要将其包装成功能

  $('.van-page-read-more').click( function() {
    $(".campervan-info-list").toggleClass("campervan-info-expand");
    showOrhide();
} );

var tallest = 60;

function showOrhide(){
 if ($(".campervan-info-list").height() > tallest) {
     $('.van-page-read-more').hide();
  }
    
   else {
    $('.van-page-read-more').show();
  }
  
};

.campervan-info-expand{
  max-height: 50px;
  overflow: hidden;
}

.van-page-read-more{
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campervan-info-list campervan-info-expand">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, orci sed faucibus semper, ante risus auctor ligula, ultricies cursus odio nulla ac leo. Vivamus auctor volutpat porta. Morbi venenatis luctus turpis, quis laoreet ante bibendum sit amet. Aliquam vel massa sed orci gravid
  
  <br>
  
  <br>lectus id commodo. Aliquam ultricies justo et magna porttitor tincidunt. Nam ut condimentum turpis. Praesent rutrum ut turpis non finibus. In eu egestas augue, vitae viverra mi. Nunc molestie enim est, luctus volutpat ante laoreet interdum. Proin id fermentum magna. Sed semper mauris urna, non pulvinar quam rhoncus ut. Integer ultrices sodales odio vitae pharetra. Duis a enim nec velit rhoncus pharetra eu a sapien.

Donec sem enim, ornare vitae tellus eu, porta ultricies ligula. Suspendisse in nisi a metus sagittis iaculis. Nullam eu eros eu urna
<br>

lacinia lacinia. Quisque pharetra metus neque, in venenatis sem scelerisque eu. Proin blandit, purus vel volutpat scelerisque, ex orci varius nunc, ut consequat turpis mauris non magna. Mauris pellentesque mauris mi, e
</div>
<br>
<a class="van-page-read-more">Read more</a>

使用jquery .height（）隐藏/显示div

3 个答案: