引導程序：面板中的上滑/下滑或手風琴

Question

重新加載頁面時，默認情況下，我有一個面板標題和一個面板主體，其中包含描述。 當我單擊+符號時，將顯示一些內容並刪除該描述。

一切正常。 但是當我向上滑動時，出現了描述，但突然出現了中風。

我可以使用time unit來執行此操作，但會為其添加淡入效果。 我不要

 $('.add_discount_plus_minus').on('click', function () { if($(this).text() === "+" ) { $(this).text("-"); $('.club_registration_plus_minus').text("+"); $('.settings_plus_minus').text("+"); $('.add_discount_one_line_description').hide(); $('.show_hide_add_discount_panel').slideDown(); } else { $(this).text("+"); /*$(this).css('font-size' , '20px');*/ $('.show_hide_add_discount_panel').slideUp(); $('.add_discount_one_line_description').show(); } }) 

 .add_discount_plus_minus { position: absolute; top: 50%; right: 15px; transform: translateY(-100%); font-size: 20px; } .show_hide_add_discount_panel { display: none; } .set_padding_0 { padding: 0 !important; } .set_margin_0 { margin: 0 !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="panel panel-default set_padding_0"> <div class="panel-heading text-left"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10"> <span>Add Discount</span> </div> <div class="col-lg-2 col-md-2 col-sm-2"> <span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span> </div> </div> </div> <div class="panel-body "> <div class="row set_margin_0"> <span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span> </div> <div class="show_hide_add_discount_panel "> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> </div> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> <div></div> </div> </div> </div> </div> 

這是JSFiddle

當您向上滑動面板主體時，說明會突然顯示。 我該如何解決？

任何幫助都會很棒。

謝謝。

Answer 1

您無需使用超時，很難精確匹配滑動所需的時間。 slideUp（）方法具有回調函數，以在動畫完成后調用，並在其中顯示默認內容

$('.show_hide_add_discount_panel').slideUp(function(){
   $('.add_discount_one_line_description').show();
});

https://jsfiddle.net/hbxqsxjp/2/

Answer 2

然后，您應該嘗試添加一些timeout然后才能看到默認內容。

小提琴： https : //jsfiddle.net/qaeed/hbxqsxjp/1/

 $('.add_discount_plus_minus').on('click', function () { if($(this).text() === "+" ) { $(this).text("-"); $('.club_registration_plus_minus').text("+"); $('.settings_plus_minus').text("+"); $('.add_discount_one_line_description').hide(); $('.show_hide_add_discount_panel').slideDown(); } else { $(this).text("+"); /*$(this).css('font-size' , '20px');*/ $('.show_hide_add_discount_panel').slideUp(); setTimeout(function(){ $('.add_discount_one_line_description').show(); }, 1000); } }) 

 .add_discount_plus_minus { position: absolute; top: 50%; right: 15px; transform: translateY(-100%); font-size: 20px; } .show_hide_add_discount_panel { display: none; } .set_padding_0 { padding: 0 !important; } .set_margin_0 { margin: 0 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="panel panel-default set_padding_0"> <div class="panel-heading text-left"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10"> <span>Add Discount</span> </div> <div class="col-lg-2 col-md-2 col-sm-2"> <span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span> </div> </div> </div> <div class="panel-body "> <div class="row set_margin_0"> <span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span> </div> <div class="show_hide_add_discount_panel "> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> </div> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> <div></div> </div> </div> </div> </div>