woocommerce 产品详情页short description 添加read more, read less

fobwebs

已于 2024-03-21 19:27:45 修改

阅读量797

点赞数 8

CC 4.0 BY-SA版权

文章标签： less 前端 css

于 2023-12-26 09:21:26 首次发布

本文链接：https://blog.csdn.net/fobweb/article/details/135213629

效果如下图：

代码：

add_action('wp_footer', function(){
	if(is_product()):
?>
<script>
jQuery(function($){
	const decCon = $('.woocommerce-product-details__short-description');
	const conHeight = decCon.height();
	if(conHeight < 120){
		decCon.addClass('more');
		decCon.after('<button class="showBtn" data-a="0">Read More</button>');
		$('.showBtn').on('click', function(){
			decCon.toggleClass('showAll');
			if( $(this).data('a') == 0 ){
				$(this).data('a', 1);
				$(this).text('Read Less');
			}else{
				$(this).data('a', 0)
				$(this).text('Read More');
			}
		});
	}
});
</script>

另外需要CSS 配合：

.woocommerce-product-details__short-description{
	max-height:105px;
  overflow: hidden;
}