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展開和摺疊文本

回答

相關問題