引导程序：面板中的上滑/下滑或手风琴

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>