jQueryの展開と折りたたみのテキスト

Question

ボタンをクリックしてテキストを拡大したり折りたたんだりするのに問題があります。私はあなたがボタンをクリックするとテキストを崩壊させることができましたが、それを元に戻すことができるようにする必要もあります。私は最初にそれを隠すようにする必要があり、ボタンをクリックするとそれが消費され、その後に再び折りたたむことができます。ここに私のコードは

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

Answer 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>

Answer 2

であるあなたが代わりにjQueryのトグルメソッドを使用することができます。

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

Answer 3

問題は、ボタンのクリックイベントに2つのハンドラをバインドしていることです。ボタンをクリックすると、両方ともトリガーされますが、最初のもの（slideUp） が表示されます。

$('#btnSlideDown')は、存在しない要素を指します（少なくともあなたの例ではありません）。

これを解決する最も簡単な方法は、jQueryのslideToggle()メソッドを使用してclickイベントを処理する方法です。

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

これを試してみてください。

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

あなたは完全なマニュアルhere

Answer 5

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>