jQuery展开和折叠文本

-1

我在点击按钮上扩展和折叠文本时遇到问题。当你点击按钮时，我能够做到这一点，文本崩溃，但我也需要这样做，所以你可以把它展开。我需要首先将它隐藏起来，当你点击按钮时，它会消耗掉，然后你可以再次折叠它。这里是我的代码jQuery展开和折叠文本

$(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>

来源

2017-10-12 iKON1K

使用布尔

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>

来源

2017-10-12 14:47:08

好吧，你的答案，因为我认为最适合我，但很快的问题，如何使页面加载时隐藏文本，然后用户点击扩大它的文本显示了？ – iKON1K

@ iKON1K使用** CSS **属性'display：none'，＆当用户点击*展开*使用这个：'$（'＃p1'）。show（）' –

好吧，它的工作，非常感谢你许多 – iKON1K

您可以使用jQuery的切换方法，而不是：

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

来源

2017-10-12 14:42:18

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

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

解决此问题的最简单方法是使用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>

来源

2017-10-12 14:44:19 j08691

并不是说他是T中的实际问题试图绑定到$（'＃btnSlideDown'），但是没有该id的元素？虽然+1为您的解决方案;） –

@ Mr.Greenwoodz完全。我刚刚看到我误解了第二个处理程序的jQuery。 – j08691

发生在最好:) –

尝试。

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

你可以阅读完整的文档here

来源

2017-10-12 14:44:48 pinoyCoder

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

来源

2017-10-12 14:44:51 Amit

jQuery展开和折叠文本

回答

相关问题