我设计了可折叠的手风琴。它的工作正常。问题是，单击“提交”按钮时，手风琴会自动折叠，而无需单击用于折叠和展开的加号或减号。在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"> </span>
</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>
答案 0 :(得分：0)
好的。我假设您不能处理后端语言（例如PHP或Python），所以我仅限于前端。我将使用hash navigation的简单jQuery解决方案来解决您的问题。
受 this answer 的启发：
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"> </span>
</a>
到
<a id="collapseTrigger" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred"> </span>
</a>
这将导致如下所示：http://jsfiddle.net/pg2v5anc/4/
请注意，由于我们无法在JSFiddle提交表单，因此我强迫元素单击。但这将是发送后的结果。这是您需要的吗？