无法防止手风琴自动折叠单击提交按钮答案

【问题标题】：Unable to prevent accordion automatically collapse clicking on submit button无法防止手风琴自动折叠单击提交按钮
【发布时间】：2018-08-28 10:40:17
【问题描述】：

我设计了可折叠的手风琴。它工作正常。问题是当单击提交按钮时，手风琴会自动折叠，而无需单击用于折叠和展开的加号或减号。在 JS 代码中我使用了 stopPropagation 但它不起作用。如果不单击加号或减号，则不应自动折叠它。我想在单击“应用”按钮后保持手风琴打开。

$(document).ready(
  function() {
    // Add minus icon for collapse element which is open by default
    $(".collapse.in").each(
      function() {
        $(this).siblings(".panel-heading").find(
          ".glyphicon").addClass(
          "glyphicon-minus").removeClass(
          "glyphicon-plus");

      });

    // Toggle plus minus icon on show hide of collapse element
    $(".collapse #btnSave").on(
      'show.bs.collapse',
      function(e) {
        $(this).parent().find(".glyphicon")
          .removeClass("glyphicon-plus")
          .addClass("glyphicon-minus");
        e.stopPropagation();
      }).on(
      'hide.bs.collapse',
      function() {
        $(this).parent().find(".glyphicon")
          .removeClass("glyphicon-minus")
          .addClass("glyphicon-plus");

      });
    e.stopPropagation();

  });

$("#startDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  todayHighlight: true,
  minDate: 0,
  numberOfMonths: 1,
  onSelect: function(dateStr) {
    var min = $(this).datepicker('getDate'); // Get selected date
    $("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
  }
});

$("#endDate").datepicker({

  beforeShowDay: $.datepicker.noWeekends,
  changeMonth: true,
  endDate: true,
  todayHighlight: true, //today highlighted with different color
  minDate: 0, //to show current date

  numberOfMonths: 1, //to display number of months ex: 1 month or multiple months

  onSelect: function(dateStr) {

    var max = $(this).datepicker('getDate');
    $('#datepicker').datepicker('option', 'maxDate'); //to select highest date
    var start = $("#startDate").datepicker("getDate"); //get an start date using inbuilt method of getDate
    var end = $("#endDate").datepicker("getDate"); //get an end date using inbuilt method of getDate

    var days = ((end - start) / (1000 * 60 * 60 * 24) + 1); //differnce calculation start date and enddate
    $("#noofDays").val(days); //calculated number of days

  }

});

.panel-default>.panel-heading {
	border-color: black;
}

.bs-example {
	margin: 20px;
	font-weight: 700px;
}

.control-label {
	font-size: 11px;
	padding-top: 4px;
}

.form-control {
	display: block;
	width: 100%;
	height: 27px;
	padding: 6px 6px;
	font-size: 10px;
}

.form-group {
	margin-top: 12px;
}

#bs-example-navbar-collapse-1 {
	text-align: justify;
	text-align-last: center;
}

#pls {
	font-size: 10px;
	float: right;
}

hr {
	height: 1px;
	color: #123455;
	background-color: #123455;
	border: none;
}

.ui-datepicker-prev ui-corner-all {
	background-color: #123455;
}

#btnSave {
	margin-right: 20px;
	background-color: #90EE90;
	border-color: #ccc;
	color: black;
}

#btnCancel {
	margin-right: 10px;
	background-color: #FFA500;
	border-color: #ccc;
	color: black;
}

#btnS {
	background-color: #90EE90;
	border-color: #ccc;
	color: black;
}

#btnC {
	margin-right: 5px;
	background-color: #FFA500;
	border-color: #ccc;
	color: black;
}

.panel-footer {
	padding: 30px 15px;
}

#textAlign {
	text-align: center;
}

#remark {
	border-radius: 4px;
	font-size: 10px;
}
#notificationBell{

color: grey;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="css/style.css" rel="stylesheet">

<link href="css/jquery.ui.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- jQuery Popup css-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <form role="form" name="leaveForm" id="leaveForm">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading" style="background-color: #b3daff;">

          <h4 class="panel-title">
            <span style="font-weight: 700;">L </span>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span> &nbsp;
            </a>

          </h4>
        </div>

        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">

            <div class="row">
              <div class="col-sm-12 col-md-4">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;">Leave Type <span
														class="text" style="color: red;">*</span></label>
                  <div class="col-sm-4 col-md-12">
                    <select class="form-control" required>
                      <option selected hidden value="">Type</option>
                      <option>Lee</option>
                      <option> Le</option>
                    </select>

                  </div>
                </div>
              </div>

              <div class="col-sm-12 col-md-4">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;">L<span
														class="text" style="color: red;">*</span></label>
                  <div class="col-sm-4 col-md-12">
                    <input type="text" class="form-control" name="leaveBalance" id="leaveBalance" placeholder="Le" required />
                  </div>
                </div>
              </div>
            </div>


            <div class="row">

              <div class="col-sm-12 col-md-4">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;">St<span
														class="text" style="color: red;">*</span></label>
                  <div class="col-sm-4 col-md-12">
                    <input type="text" class="form-control" name="startDate" id="startDate" placeholder="" required />
                  </div>
                </div>
              </div>

              <div class="col-sm-12 col-md-4">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;">En<span
														class="text" style="color: red;">*</span></label>
                  <div class="col-sm-4 col-md-12">
                    <input type="text" class="form-control" name="endDate" id="endDate" placeholder="End Date" required />
                  </div>
                </div>
              </div>
              <div class="col-sm-12 col-md-4">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;"> No o<span
														class="text" style="color: red;">*</span></label>
                  <div class="col-sm-4 col-md-12">
                    <input type="text" class="form-control" name="noofDays" id="noofDays" placeholder="No of days" required />
                  </div>
                </div>
              </div>


            </div>
            <div class="row">

              <div class="col-sm-12 col-md-8">
                <div class="form-group">
                  <label class="control-label col-md-12" style="padding-top: 1px;">R</label>
                  <div class="col-sm-4 col-md-12">
                    <textarea rows="1" class="form-control" style="resize: none;" id="reason" placeholder=""></textarea>
                  </div>
                </div>
              </div>
            </div>

            <br />
            <div class="col-sm-12 col-md-11">
              <button type="submit" id="btnSave" class="btn btn-primary btn-sm pull-right">Apply</button>
              <button type="reset" id="btnCancel" class="btn btn-danger btn-sm pull-right">Cancel</button>
            </div>

          </div>
        </div>
      </div>

    </div>

  </form>
</div>

【问题讨论】：

点击“btnSave”后是否保持打开状态，对吗？
你在保存按钮上做什么。阿贾克斯？
@saActionExactly.
@CodeThing Post 方法在 spring 中不使用 Ajax。
请任何人帮助我。

标签： javascript jquery html

【解决方案1】：

好的。我假设您无法处理后端语言（如 PHP 或 Python），所以我仅限于前端。我将使用hash navigation 的简单 jQuery 解决方案来解决您的问题。

灵感来自 this answer：

Andrew Orlov说

var hash = window.location.hash;
if (hash) {
  var element = $(hash);
  if (element.length) {
    element.trigger('click');
  }
}

有了这个，我们可以要求浏览器根据哈希导航触发点击事件。只需将这段代码添加到您的脚本并将action="#collapseTrigger" 添加到您的表单中，同时替换

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span> &nbsp;
            </a>

到

<a id="collapseTrigger" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span> &nbsp;
            </a>

这将导致如下所示：http://jsfiddle.net/pg2v5anc/4/

请注意我正在强制点击元素，因为我们无法在 JSFiddle 提交表单。但这将是发送后的结果。这是你需要的吗？

【讨论】：

这里的问题是，即使我刷新页面，手风琴也没有折叠。
我的手风琴基本状态是崩溃的。
@Learning 你有任何链接可以检查吗？由于我们正在处理表单提交，因此可能会发生其他错误。