Question

我刚刚开发了一个新的wordpress主题，但是有一个未经解决的问题。

所以，我已经使用jQuery在描述中添加了更多的阅读和更少的链接。

我在这里遇到的唯一问题是，如果高度为16像素，我不想显示链接，所以我只想在描述高度大于16像素时启用它。

任何人对此都有任何想法？三江源。

jQuery(function() {
  jQuery('.the_description').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    jQuery(this).text(this.expand?"Click to collapse":"Click to read more");
    jQuery(this).closest('.the_description').find('.small, .big').toggleClass('small big');
  });
});

.small {
  height: 16px;
  overflow: hidden;
}

.big {
  height: auto;
}

.desc_more {
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the_description">
  <div class="small">
    This is a test description.
  </div>
  <div class="desc_more">
    <a href="#">Click to read more</a>
  </div>
</div>

Answer 1

$( document ).ready(function() {
  var height = $(".small").height();
  if(height < 16)
      $(".desc_more").hide();
   else
      $(".desc_more").show();  
});

我认为你正在谈论div的高度与文本“这是一个测试描述。”您可以将以上代码用于相关元素

Answer 2

您可以使用解决方案https://jsfiddle.net/ztys5y05/

＆＃13;

$(function() {
  $('.small').each(function(){
    if($(this).find('span').height() <= 18){
      $(this).next('div.desc_more').hide();
    } else {
      $('.the_description').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        jQuery(this).text(this.expand?"Click to collapse":"Click to read more");
        jQuery(this).closest('.the_description').find('.small, .big').toggleClass('small big');      
      });
    }
  });
});

＆＃13;

.small {
  height: 16px;
  overflow: hidden;
}

.big {
  height: auto;
}

.desc_more {
  width: 100%;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the_description">
  <div class="small">
    <span>
      This is a test description.
    </span>
  </div>
  <div class="desc_more">
    <a href="#">Click to read more</a>
  </div>
</div>

<div class="the_description">
  <div class="small">
    <span>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum    
    </span>
  </div>
  <div class="desc_more">
    <a href="#">Click to read more</a>
  </div>
</div>

＆＃13;

希望这会对你有所帮助。

Answer 3

使用jQuery使用.css获取元素的高度（＆＃39; height＆＃39;）

然后您可以使用show（）和hide（）来分别显示和隐藏内容。

if ($('.small').css('height') > 16)
{
  $('.desc_more').show();
}
else{
  $('.desc_more').hide();
}

Answer 4

您可以使用CSS max-height属性设置div的最大高度：

.small {
    max-height: 16px;
    }

祝你好运

如果描述是默认大小，如何禁用读取更多链接

4 个答案: