阅读更多按钮jquery只在wordpress中隐藏div的第一个元素

问题描述

为什么，我对这段代码有问题，它只隐藏div的第一个p，我的div包含不同的标题和段落，我想隐藏所有前180个字符，但只隐藏第一个li

<div class="product-short-description">
    <h5>Product Description</h5>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h5>Product Details</h5>
<p>Material: Aluminium</p>
<p>Warranty: One Year Warranty Guarantee</p>
<p>Original: China</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h5>Shipping @R_643_4045@ion</h5>

</ul>
</div>



function bbloomer_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js('
      var show_char = 180;
      var ellipses = "... ";
      var content = $(".product-short-description").html();
      //var content = $(".product-short-description").text().length

      alert(content);


      if (content.length > show_char) {
         var a = content.substr(0,show_char);
         var b = content.substr(show_char - content.length);
         var html = a + "<div class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>Read more</a></div><div class=\'truncated\' style=\'display:none\'>" + b + "</div>";
         $(".product-short-description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".product-short-description .truncated").toggle();
      });
   ');
}

解决方法

以PHP / HTML显示 WP功能=> https://developer.wordpress.org/reference/functions/wp_trim_words/

// PHP
$text = 'Lorem ipsum dolor';
$words = 2;
$more = ' … <a class=\'read-more\'>Read more</a>';
$excerpt = wp_trim_words( $text,$words,$more );
// $excerpt => Lorem ipsum … Read more
?>

<div class="product-short-description">
    <div class="excerpt">
        <?php echo $excerpt; ?>
    </div>

    <div class="truncated" style="display: none;">
        <?php echo $text; ?>
    </div>
    
</div>

JS中的动作

// JS
$(".read-more").click(function(e) {
    e.preventDefault();
    $(".product-short-description .truncated").toggle();
    $(".product-short-description .excerpt").toggle();
});