JavaScript 多读/少读

Question

谁能帮我解决这个问题，我需要在两个元素之间隐藏和显示内容，这两个元素由多读和少读按钮表示。在我的示例中它工作正常，但我的问题是当我单击 'Read More' 按钮时它应该隐藏，而 'Read Less' 应该出现，反之亦然。我需要保留这些锚点元素，因为此文本应该可供最终用户翻译，因此他们无法访问 javascript 代码。请帮忙

$(document).ready(function(){
    $('.service-info').hide();
      $('.read-more').click(function(){
          $(this).nextUntil('.read-less').show();

        })
      $('.read-less').click(function(){
        $(this).prevUntil('.read-more').hide();

      })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
  </div>
<a href="#" class="read-less">Read Less</a>


<div class="separator"><hr></div>


<a href="#" class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>

  </div>
<a href="#" class="read-less">Read Less</a>

Answer 1

检查这个fiddle

$(document).ready(function(){
    $('.service-info').hide();
    $('.read-less').hide();
      $('.read-more').click(function(){
          $(this).hide();
          $(this).next().show();
          $(this).next().next().show();
        })
      $('.read-less').click(function(){
        $(this).prev().hide();
          $(this).prev().prev().show();
          $(this).hide();
      })
  })

Answer 2

你的问题很简单，你的代码看起来也不错，一个非常简单的答案可能是这样。虽然不是最好的！

  $(document).ready(function(){
       $('.service-info').hide();
       $('.read-less').hide();
       $('.read-more').click(function(){
          $(this).nextUntil('.read-less').show();
          $(this).hide();
          $(this).next().next().show();
        })
       $('.read-less').click(function(){
         $('.read-less').hide();
         $('.read-more').show()
         $(this).prevUntil('.read-more').hide();
      })
  })

Answer 3

也许你想看这里：

https://jsfiddle.net/0x4utwym/

$(document).ready(function() {
  $('.service-info').hide();
  $('.read-more').click(function() {
    $('.service-info').hide();
    $(this).nextUntil('.read-less').show();

  })
  $('.read-less').click(function() {
    $(this).prevUntil('.read-more').hide();

  })
})

基本上我在这里做的是在点击事件之后隐藏信息。你的其余代码对我来说似乎没问题。

Answer 4

一个更好的解决方案是用 div 然后 hide/show 包裹那些你想要的东西。并使 read-less 默认不可见。

查看 jsFiddle：http://jsfiddle.net/qe06xux5/

Html 应如下所示：

<div class="container">
  <a href="#" class="read-more">Read More </a>
    <div class="service-info">

      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
      <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    </div>
  <a href="#" class="read-less">Read Less</a>
</div>

和Jquery：

$(document).ready(function(){
   $('.service-info').hide();
   $('.read-more').click(function(){
      $(this).siblings('.service-info').show();
      $(this).hide();
      $(this).parent().find('.read-less').show();
   });

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

Answer 5

您可以尝试使用 css:

首先用长文本和阅读更多/更少按钮定义 html:

<p>
    <span id="longtext">Lorem ipsum dolor sit amet, wisi quas ligula fusce. Non libero aliquam ipsum suscipit wisi, leo erat dui mollis sem lacinia, justo tempora sem duis sem sagittis faucibus. Ac placerat platea felis, nisl vivamus aliquam wisi senectus gravida, nec urna odio eu. Curabitur ab, varius quis imperdiet, magna neque natoque augue rhoncus, mauris vel rhoncus, sit urna in sed sodales diam. In suscipit wisi, ut pretium ac curabitur luctus, pellentesque sed tempus ut feugiat. Vel nec nibh eleifend adipiscing, lectus egestas viverra maecenas, vehicula metus lorem nunc ut justo, pellentesque in interdum quis. Pede enim, faucibus non dictum erat etiam in accumsan. Praesent et dictum sit massa. Integer vivamus quis orci platea est lectus, vestibulum morbi nam mauris, est commodo nulla pulvinar ipsum, varius phasellus sollicitudin.</span>
    <a id="readless" onclick="javascript:fncReadless();">Read less</a>
    <a id="readmore" class="hidden" onclick="javascript:fncReadmore();">Read more</a>

.css:

.parrafContract {
    width:40%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: inline-block;
}

javascript函数：

function fncReadless() {
    $("#longtext").addClass("parrafContract ");
    $("#readless").hide();
    $("#readmore").show();
}

function fncReadmore() {
    $("#longtext").removeClass("parrafContract ");
    $("#readless").show();
    $("#readmore").hide();
}

在这种情况下，我将页面初始化为显示所有长文本。

JavaScript 多读/少读

JavaScript Read More / Read Less

javascript

jquery

toggle