我有一个小组。当我单击+符号时,应显示面板主体。和+应该转换为-,当我单击-时,面板主体应该合拢。

但这有一点变化。

javascript - jQuery Toggle div使用+和-符号单击Panel header-LMLPHP

javascript - jQuery Toggle div使用+和-符号单击Panel header-LMLPHP

因此,当第一时间页面重新加载时,面板应类似于第一图像,并且当单击+符号时,它将打开面板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

10-05 20:42
查看更多