Question

有人可以帮我解决这个问题吗，我需要隐藏和显示两个元素之间的内容，这两个元素由更多阅读和少阅读按钮表示。在我的例子中，它工作正常，但我的问题是当我点击“阅读更多”＆＃39;它应该隐藏的按钮，以及“阅读少”＆＃39;应该出现，反之亦然。我需要保留这些锚元素，因为这个文本应该是最终用户可以翻译的，因此他们无法访问javascript代码。请帮忙

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

更好的解决方案是用div包裹那些然后隐藏/显示你想要的东西。并且默认情况下使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 2

检查此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 3

您的问题非常简单，您的代码看起来已经很好了，一个非常简单的答案就是这个。虽然不是最好的！

  $(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 4

你想看看这个，你想看看：

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 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阅读更多/阅读更少

5 个答案: