Question

我无法在点击按钮上展开和折叠文字。当你点击按钮，文本崩溃时，我能够这样做，但我也需要这样做，你可以将其展开。我需要首先将它隐藏起来，当你点击按钮时它会消耗，之后你可以再次折叠它。这是我的代码

＆＃13;

$(document).ready(function() {
  $('#btnSlideUp').click(function() {
    $('#p1').slideUp(1000);
  });

  $('#btnSlideDown').click(function() {
    $('#p1').slideDown(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
  <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
    of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
  <p>
    <a href="contactus.html"><button type="button" class="btn btn-
     outline-primary btn-lg">Contact Us</button></a>
    <a href="path.html"><button type="button" class="btn btn-outline
    secondary btn-lg">Start finding a job</button></a>

  </p>
</div>

＆＃13;

Answer 1

~~问题是您将两个处理程序绑定到按钮上的click事件。单击该按钮时，两个按钮都会被触发，但您只能看到初始按钮（slideUp）~~。

$('#btnSlideDown')指的是一个不存在的元素（至少在您的示例中不存在）。

解决此问题的最简单方法是使用jQuery的slideToggle()方法来处理点击事件。

＆＃13;

$(document).ready(function() {
  $('#btnSlideUp').click(function() {
    $('#p1').slideToggle(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
  <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
    of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
  <p>
    <a href="contactus.html"><button type="button" class="btn btn-
     outline-primary btn-lg">Contact Us</button></a>
    <a href="path.html"><button type="button" class="btn btn-outline
    secondary btn-lg">Start finding a job</button></a>

  </p>
</div>

＆＃13;

Answer 2

您可以使用jQuery的切换方法：

$(document).ready(function(){
    $('#btnSlideUp').click(function(){
        $('#p1').toggle(1000);
    });
 });

Answer 3

试试这个。

$(document).ready(function() {
  $('#btnSlideUp').click(function() {
    $('#p1').slideToggle(1000);
  });

您可以阅读完整文档here

Answer 4

使用jquery .slideToggle()功能。

$(document).ready(function() {
  $('#btnSlideUp').click(function() {
    $('#p1').slideToggle(1000);
  });

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
  <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
    of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
  <p>
    <a href="contactus.html"><button type="button" class="btn btn-
     outline-primary btn-lg">Contact Us</button></a>
    <a href="path.html"><button type="button" class="btn btn-outline
    secondary btn-lg">Start finding a job</button></a>

  </p>
</div>

Answer 5

使用布尔值

var isDown=true;

  $('#btnSlideUp').click(function() {
      
      if(isDown){
        $('#p1').slideUp(1000);
        isDown=false;
      }else
      {
        $('#p1').slideDown(1000);
        isDown=true;
      }
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="btnSlideUp" class="btn btn-outline-success"><h1 class="jumbotron-heading">Expand</h1></button>
  <p class="lead text-muted" id="p1">Below this post you can find different articles, tips&tricks about how to find the job. You can try to contact us, and we will greatly try to answer all of your questions. You can click on "Start finding a job" and we will take you through the basics
    of finding a job, from the beginning till the end if you have absolutely no excperience.</p>
  <p>
    <a href="contactus.html"><button type="button" class="btn btn-
     outline-primary btn-lg">Contact Us</button></a>
    <a href="path.html"><button type="button" class="btn btn-outline
    secondary btn-lg">Start finding a job</button></a>

  </p>
</div>

jQuery扩展和折叠文本

5 个答案: