如何成功显示和隐藏一段文本

How to successfully show and hide a paragraph of text?

本文关键字：一段 文本 隐藏 显示 何成功 成功      更新时间：2023-11-22

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

我已经设法显示了更多的文本，但当你隐藏文本时，就不能再显示了。

当您已经按下show more时，它还会在页面中留下show more链接。

如果有人能引导我朝着正确的方向前进，我会非常感激的

这是我的宝贝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');
})

首先，您提供了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');
   })

你只需要正确地交换你的类。我在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(); 
    })

通常，一次只显示一个按钮，可以是多按钮，也可以是少按钮，这就是为什么当用户点击更多按钮时，我们需要删除更多按钮，而显示更少按钮，当用户点击更少按钮时也是如此。

我在JsFiddel 上实现了相同的功能

试试这个：

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

*编辑以隐藏该节目并隐藏"显示更多"按钮。

我看不到您的完整代码（jsfiddle在我当前的网络中被屏蔽），但我可以告诉您的一件事是，您正在将方法与两个按钮混合使用。JQuery有三种基本的"幻灯片"方法：.slideUp()、.slideDown()和.slideToggle()。

  • .slideUp()使用滑动动作使选定元素隐藏
  • .slideDown()使用滑动动作来显示所选元素
  • .slideToggle()使所选元素基于其当前状态在显示或隐藏之间交替（即，如果它当前被隐藏，它将显示，如果它目前被显示，它将隐藏），使用滑动运动。基本上，它是.slideUp()和.slideDown()在一个方法中的组合

在您的情况下，如果您要使用两个按钮，我建议使用.slideUp()表示"显示较少"，使用.slideDown()表示"显示较多"。但是，您似乎必须在按钮本身添加一个额外的.show()和.hide()，才能显示/隐藏视图的相应按钮。类似这样的东西：

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

如果使用一个按钮，可以很容易地使用.slideToggle()方法，但每次都必须更新按钮的显示，以指示"显示更多/更少"状态。类似这样的东西：

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

或者类似的东西。

相关文章：