jQuery元素顯示並在按鈕單擊時向下滑動

Question

所以我正在學習jQuery / JavaScript。 我相信標題說這一切都試圖得到一個設置為display: none的div部分display: none顯示，同時在按鈕點擊上慢慢滑下

根據jQuery手冊，W3schools以及我嘗試閱讀的其他幾個地方，這就是我想出來的。 不用說它看起來不漂亮。

我的邏輯是代碼應該在按鈕點擊hench上執行我把onclick事件處理程序放到button元素。

 function showPackages(){ $('#submitBtn').on('click', function(){ $('#showPackages').slideDown('slow', function(){ $('#showPackages').css('display', 'inline'); }); }); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="panel-group" id="dispPackages" style="display: none"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> 

任何幫助/建議表示贊賞。

Answer 1

首先，您必須bind 事件處理程序。

function showPackages(){
    $('#submitBtn').on('click', function(){
      $('#showPackages').slideDown('slow', function(){
        $('#showPackages').css('display', 'inline');
      });
    });
}

當您每次單擊輸入時寫入時，它會將click事件處理程序附加到submitBtn 。

把它改成這個：

function showPackages(){

}
$('#submitBtn').on('click', function(){

});
$('#showPackages').slideDown('slow', function(){
    $('#showPackages').css('display', 'inline');
});

但是，如果要自動觸發事件，請使用.trigger()方法。

function showPackages(){
    $('#submitBtn').trigger('click');
    $('#showPackages').trigger('slideDown');
}

Answer 2

試試這個

顯示和隱藏可以用不同的效果完成

• hide（）和show（）
• fadeIn（），fadeOut（）和fadeToggle（）
• slideUp（），slideDown（）和slideToggle（）

*在你的情況下你想要幻燈片效果所以只需使用slideToggle（）

 $('#submitBtn').on('click', function(){ //$('#dispPackages').slideToggle('slow') this will set display:block $('#dispPackages').slideToggle('slow').css("display","inline-block"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <button id="submitBtn">clickhere</button> <div class="panel-group" id="dispPackages" style="display: none"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div>