jQuery扩展和折叠文本

时间:2017-10-12 14:37:53

标签: javascript jquery html

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



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

  $('#btnSlideDown').click(function() {
    $('#p1').slideDown(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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:4)

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

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

试试这个。

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

您可以阅读完整文档here

答案 3 :(得分:2)

  

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

答案 4 :(得分:1)

  

使用布尔值

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>