如何使用一个 jquery 在同一页面中制作多个阅读更多按钮？

Question

我想只使用一个 jquery 在同一页面中创建多个阅读更多和阅读更少的按钮。当我点击阅读更多按钮时，它会显示一些内容，并在段落末尾显示阅读更少按钮。我完成了我的第一步。一页有三个阅读更多按钮。一个很好用，另外两个不行。请给点建议。

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
     
      $("#toggle").text("Read Less");
      $("#text").slideDown();
    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp();
    }
  });
});

#text{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section uk-section-small uk-section-default">
    <div class="uk-container">
        <h2 class="heading-primary uk-text-center "><span>Guide</span></h2> 
            <div class="uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
                <div>
                    <div class="uk-text-left" uk-grid>
                        <div class="uk-width-1-4@s uk-text-center">
                             <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                        <div class="uk-width-3-4@s">
                            <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                        </div>
                    </div>
                      <div class="uk-text-left" uk-grid>
                        <div class="uk-width-3-4@s">
                              <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                              <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                              <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                          </div>
                        <div class="uk-width-1-4@s">
                            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                    </div>

                    <div class="uk-text-left" uk-grid>
                        <div class="uk-width-1-4@s uk-text-center">
                             <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                        <div class="uk-width-3-4@s">
                            <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

Answer 1

问题

您正在使用相同的id 添加多个元素，这是不合适的，这意味着当您编写 javascript 时会出现错误。通过使用id，代码无法区分相关的不同元素之间的区别——即扩展了错误的文本。您也没有告诉代码单击的元素与要显示/隐藏的元素之间的关系。

解决方案

为每个元素使用类 - 即 toggle-text-button 用于触发显示或隐藏具有类 .toggle-text 的元素的链接。

我使用以下代码从<a class="toggle-text-button">Read More</a> 移动到适当的元素：

$(this).parent().children(".toggle-text").slideDown();

代码说明：

• $(this) jquery 表示法，告诉代码从当前处于焦点的元素开始（即单击的那个）
• .parent() 在 DOM 树上向上移动一个元素（另一种选择是 .closest()，它会继续向上移动直到满足选择器条件）
• .children(".toggle-text") 找到当前元素的所有子元素（因为我们已经向上移动了 DOM 树，这是被点击元素的父元素），匹配选择器
• .slideDown() 向下滑动匹配上一系列选择器的任何元素

---

演示

// Add click event dynamically
$(document).on("click", ".toggle-text-button", function() {

  // Check if text is more or less
  if ($(this).text() == "Read More") {

    // Change link text
    $(this).text("Read Less");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide down
    $(this).parent().children(".toggle-text").slideDown();
    
  } else {


    // Change link text
    $(this).text("Read More");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide up 
    $(this).parent().children(".toggle-text").slideUp();
    
  }
  
});

.toggle-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet" />
<div class="uk-section uk-section-small uk-section-default">
  <div class="uk-container">
    <h2 class="heading-primary uk-text-center "><span>Guide</span></h2>
    <div class="uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
      <div>
        <div class="uk-text-left" uk-grid>
          <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
        <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
        
        <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

替代演示

如果你用属性链接元素，你可以简化你的 javascript。请参阅下面的基本演示：

$(document).on("click", ".toggle-text-button", function() {


  if ($(this).text() == "Read More") {

    $(this).text("Read Less");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();

  } else {

    $(this).text("Read More");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
  
  }

});

.toggle-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Text that cannot be hidden.</p>
<p class="toggle-text" id="toggle-text-1">Text to show and hide.</p>
<a class="toggle-text-button" toggle-text="1">Read More</a>

Answer 2

我希望我不会为时已晚。没有 jQuery 有一个简单的解决方案。 只需使用 UIKIT 中的切换。

<section class="uk-margin-small-top">
    <p>Lorem ipsum...</p>
    <p id="toggle-click" class="uk-padding" hidden>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, tempora! Odio quibusdam odit vitae magni dolore. Praesentium officiis vel eos dicta expedita a delectus amet laborum voluptate? Veritatis, pariatur sed.</p>
    <a class="uk-link" type="button" uk-toggle="target: #toggle-click; animation: uk-animation-fade; mode: click" aria-expanded="false">
      <span id="toggle-click">Read More ...</span>
      <span id="toggle-click" hidden>Read Less ...</span>
    </a>
  </section>

Answer 3

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $(this).text();
    if (elem == "Read More") {

      $(this).text("Read Less");
      $("#text").slideDown();
    } else {

      $(this).text("Read More");
      $("#text").slideUp();
    }
  });

});