javascript - 如何成功显示和隐藏一段文字？

Question

我正在尝试使用 jquery 构建一个简单的显示和隐藏文本，但不确定从这里去哪里。

我已经设法显示了更多文本，但是当您隐藏文本时，您无法再次显示它。

当您已经按下显示更多时，它还会在页面中留下链接显示更多。

如果有人能指导我正确的方向，我会非常感激。

这是我的作品 http://jsfiddle.net/nLzDk/

/*  SHOW MORE AND LESS TEXT PROFILE PAGE
===================================================================*/
$("#show-more-btn").click(function(e){
    e.preventDefault();
    $(".show-more").slideToggle('slow');
})

$("#show-less-btn").click(function(e){
    e.preventDefault();
    $(".show-less").slideUp('slow');
})

Answer 1

首先，您提供了 JsFiddle 链接，这很好，它帮助我找到了实际问题。

以下方法可能对您有所帮助，您可能需要进行如下更改 -

HTML-

    <div class="show-more clearfix">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
          <a href="#show-more-btn" id="show-more-btn">More</a>
       </p>
    </div>
<div class="show-less clearfix">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
          <a href="#show-less-btn" id="show-less-btn">Less</a>
       </p>
</div>

CSS -

    .show-less{
        display:none;
    }

Javascript -

    $("#show-more-btn").click(function(e){
       e.preventDefault();
       $(".show-less").slideToggle('slow');
    })

   $("#show-less-btn").click(function(e){
       e.preventDefault();
       $(".show-less").slideUp('slow');
   })

你只需要正确地交换你的类(class)。我已经在 JsFiddle 上试过了，如果这对您有帮助的话。

但是这种行为的正确方法如下 -

HTML -

    <div class="clearfix">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
        <button id="show-more">More</button>
      </p>
      <p class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, turpis vitae tincidunt fermentum,
        <button id="show-less">Less</button>
      </p>
   </div>

CSS -

    .more{
      display:none;
    }

Javascript -

    $("#show-more").click(function(e){
      e.preventDefault();
      $(".more").slideToggle('slow');
      $(this).hide();
      $("#show-less").show(); 
    })

    $("#show-less").click(function(e){
      e.preventDefault();
      $(".more").slideUp('slow');
      $(this).hide();
      $("#show-more").show(); 
    })

通常，一次应该只显示一个按钮，更多按钮或更少按钮，这就是为什么我们需要在用户按下更多按钮时删除更多按钮并显示更少按钮按钮，这同样适用于用户点击少按钮。

我已经实现了相同的 here on JsFiddel