Question

正如您所看到的，我正在努力制作更多/更少的按钮。

我将段落折叠为默认状态。
点击“显示更多”按钮展开段落。
该段落已展开。
点击show less按钮不起作用

HTML：

true

<div class="wrapper">
   <!--Start Para-->
    <div class="para">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.</p>
    </div> <!--END para-->
</div> <!--END wrapper-->

Answer 1

你在这里有一点误解，你不是按段落保持唯一性，因为你只保存第一个html中的html。

你需要做的是遍历段落，让每个人知道它有多长短文。这是data函数在我的代码中的作用。

您还需要将事件委派与jquery on一起使用，以便将点击事件绑定到动态添加的show more / less链接。

＆＃13;

$(document).ready(function(){

  $(".para").children("p").each(function(index,item)
  {
      var shortText = $(this).html().substr(0, 380);
      var originalText = $(this).html();
    
      if(originalText.length > 380)
      {
        // save the original paragraph html in the paragraph data
        $(this).data('long_p', originalText);
        $(this).data('short_p', shortText);
        
        $(this).html(shortText + "...<a class='linkBtn more' href='#'>show more</a>");
      }
     
    }); 
    
     
    $('p').on('click','.linkBtn', function(){
    
        var para = $(this).closest('p');
      
        if($(this).hasClass('more'))
        {
          
            para.html(para.data("long_p") + "...<a class='linkBtn less' href='#'>show less</a>");
        }
        else
        {
             para.html(para.data("short_p") + "...<a class='linkBtn more' href='#'>show more</a>");         
        }
    
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <!--Start Para-->
    <div class="para">
        <p>No need for show more paragraph one</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.123</p>
        <p><b>I am a unique paragraph and my text shall stay unique.</b> Rem, libero voluptatem sunt voluptate est sint, laboriosam ab facilis recusandae dolorem fuga accusamus, aperiam nam sequi veniam. Provident fugit nobis adipisci consequatur beatae, perspiciatis molestias quam officiis odit consectetur! Sapiente, tempore, nesciunt. Recusandae assumenda natus iste placeat illo. Dignissimos ea, sed suscipit asperiores quidem alias quam earum, tempore, nihil eius aliquam sit, accusantium enim at! Exercitationem nesciunt deleniti, ipsa aut ab rerum, harum voluptatem dolore optio architecto dolores? Fugit id ipsam sit dolores distinctio. Aliquam dolores aliquid sit soluta error ut magnam minima animi qui necessitatibus! Sequi quae, expedita iusto dolorem.456</p>
    </div> <!--END para-->
</div> <!--END wrapper-->

＆＃13;

在两个功能之间切换到同一个链接

1 个答案: