Question

我正在尝试使用jquery构建一个简单的节目并隐藏文本，但不确定从何处开始。

我设法显示更多文字，但是当你隐藏文字时，你无法再显示它。

当你按下show more时，它还会在页面中显示更多链接。

如果有人能指引我朝着正确的方向前进，那么我会非常熟悉它。

/*  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');
   })

您只需要正确地交换课程。我已经在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

Answer 2

试试这个：

/*  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();
})

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

Answer 3

我看不到你的完整代码（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");
})

。。。或类似的东西。

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

3 个答案: