常見問題頁面。顯示和隱藏內容，JQuery和CSS問題

Question

我遇到顯示和隱藏內容的問題。我無法隱藏或顯示完整內容。

我的問題是這個類的樣式faq-link-style。當我刪除它時，我閱讀更多，閱讀更少的按鈕/鏈接工作。我認爲這可能是我在JQuery中編寫它的方式。我嘗試了許多不同的版本，但無法正常工作。 例如：$（'。faq-link-style .read-more'）

是否有另一種方法來改進我的代碼？我不想重複我的代碼。例如：我不想兩次獲取內容。一旦前奏（讀少，常見問題解答，介紹），另一個時間全文（閱讀更多，常見問題解答，信息）

由於提前

<div class="col-lg-4"> 
    <div class="faq-all"> 
     <div class="faq-item"> 
      <h2><?php the_title(); ?></h2> 
      <article> 

      <div class="faq-intro"> 
        <?php the_content(); ?> 
      </div> 
      <div class="faq-info"> 
        <?php the_content(); ?> 
      </div> 

      <div class="faq-link-style"> 
       <a href="#" class="read-more">Read More</a> 
       <a href="#" class="read-less">Read Less</a> 
      </div> 
      </article> 
     </div> 
    </div> 
</div> 

JQuery的：

(function ($) { 
    $(document).ready(function() { 

     var showChar = 600; // How many characters are shown by default 

     $('.faq-intro').each(function() { 
      var content = $(this).html(); 

      if(content.length > showChar) { 
       var s = $(this).html(); 
       var c = content.substr(0, showChar); 
       var h = content.substr(showChar, content.length - showChar); 
       var html = c + " ... "; 
       $(this).html(html); 
      } 

      if(content.length < showChar){ 
       $(this).parent().find('.read-less').hide(); 
       $(this).parent().find('.read-more').hide(); 
      } 
     }); 

     $('.faq-info').hide(); 
     $('.read-less').hide(); 

     //read more 
     $('.read-more').click(function(){ 
      $(this).siblings('.faq-info').show(); 
      $(this).hide(); 
      $(this).parent().find('.read-less').show(); 
      $(this).siblings('.faq-intro').hide(); 
     }) 

     $('.read-less').click(function(){ 
      $(this).siblings('.faq-info').hide(); 
      $(this).hide(); 
      $(this).parent().find('.read-more').show(); 
      $(this).siblings('.faq-intro').show(); 
     }); 
    }); 
})(jQuery); 

Answer 1

你的選擇是錯誤的，它應該是：

$('.read-more').click(function(){ 
    $(this).hide() 
      .siblings('.read-less').show().end() 
      .parent() 
        .siblings('.faq-intro').hide().end() 
        .siblings('.faq-info').show(); 
}); 

$('.read-less').click(function(){ 
    $(this).hide() 
      .siblings('.read-more').show().end() 
      .parent() 
        .siblings('.faq-intro').show().end() 
        .siblings('.faq-info').hide(); 
});