我有一个小组。当我单击+符号时,应显示面板主体。和+应该转换为-,当我单击-时,面板主体应该合拢。
但这有一点变化。
因此,当第一时间页面重新加载时,面板应类似于第一图像,并且当单击+符号时,它将打开面板div。
注意:默认情况下,面板主体中有一行文字,单击+符号并打开面板主体内容将被删除。
$('.open_discount_div').toggle(function(){
$(".open_discount_div").text("-");
$(".show_hide_panel").slideDown();
},function(){
$(".open_discount_div").text("-");
$(".show_hide_panel").slideUp();
});
.show_hide_panel{
display: none;
}
<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_margin_0 set_padding_0" >
<div class="panel-heading text-left ticket_panel_body_bg">
<div class="row">
<div class="col-md-10 ">
<span>Add Discount </span>
</div>
<div class="col-md-2 ">
<span class="pull-right cursor_pointer open_discount_div">+</span>
</div>
</div>
</div>
<div class="panel-body set_padding_0">
DIscount Type , Code
</div>
<div class="panel-body set_padding_0 show_hide_panel">
Data To be displayed on clicking + symbol
</div>
有些我一开始看不到+符号。
这是JSFiddle
任何帮助都会很棒。
谢谢
最佳答案
问题出在您的事件处理程序上。您尚未在代码中的任何位置附加事件处理程序。
$('.open_discount_div').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.show_hide_panel').slideDown();
} else {
$(this).text("+");
$('.show_hide_panel').slideUp();
}
});
尝试上面的代码或检查更新的fiddle