现在，我已经设置了Bootstrap手风琴，因此，当单击面板主体时，它将自动关闭该面板并打开下一个面板。我想将此事件限制为每个页面加载仅发生一次。 #Carriers是第一个面板主体#Storage是下一个面板主体的ID。
我尝试了.one Jquery表达式，但是它似乎禁用了手风琴。
我猜想我需要在JS中执行此操作，但我希望有一种方法可以在每次页面加载时仅“一次”切换数据。
html手风琴：
<div class="container">
<div class="row" align="center">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!---carrier heading--->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingCarriers" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#carriers" aria-expanded="false" aria-controls="carriers">
<h4 class="panel-title">
<a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Step 1: Which Carrier? <span data-toggle="tooltip" data-placement="left" title="Select the cellular/data provider this device uses." class="glyphicon glyphicon-info-sign" style="float:right"></span>
</a>
</h4>
</div>
<!---carrier inputs--->
<div id="carriers" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingCarrier" data-parent="#accordion" href="#carriers">
<div class="panel-body" data-toggle="collapse" data-target="#storage">
<div id="att" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="att"/>
<div class="thumbnail input1">
<img src="images/att-icon.png" alt="..." class="img-responsive">
</div>
</label>
</div>
<div id="verizon" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="verizon"/>
<div class="thumbnail input1">
<img src="images/verizon-icon.png" alt="..." class="img-responsive">
</div>
</label>
</div>
<div id="sprint" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="sprint"/>
<div class="thumbnail input1">
<img src="images/sprint-icon.png" alt="..." class="img-responsive">
</div>
</label>
</div>
<div id="t-mobile" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="t-mobile"/>
<div class="thumbnail input1">
<img src="images/t-mobile-logo.png" alt="..." class="img-responsive">
</div>
</label>
</div>
<div id="unlocked" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="unlocked"/>
<div class="thumbnail input1">
<img src="images/factoryunlocked.png" alt="..." class="img-responsive">
</div>
</label>
</div>
<div id="other" class="col-sm-6 col-md-2">
<label>
<input type="radio" name="carrier" value="other"/>
<div class="thumbnail input1">
<img src="images/othercarriers.png" alt="...">
</div>
</label>
</div>
</div>
</div>
</div>
<!---storage heading--->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingStorage" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#storage" aria-expanded="false" aria-controls="storage">
<h4 class="panel-title">
<a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Step 2: How Much Storage? <span data-toggle="tooltip" data-placement="left" title="How many GB does this device have in storage?" class="glyphicon glyphicon-info-sign" style="float:right"></span>
</a>
</h4>
</div>
<!---storage inputs--->
<div id="storage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStorage" data-parent="#accordion" href="#storage">
<div class="panel-body" data-toggle="collapse" data-target="#condition">
<div id="placeholder2" class="col-sm-12 col-md-3">
</div>
<div id="storage16" class="col-sm-12 col-md-2">
<label>
<input type="radio" name="storage" value="16"/>
<div class="thumbnail input1">
<img src="images/16gb.png" alt="...">
</div>
</label>
</div>
<div id="storage64" class="col-sm-12 col-md-2">
<label>
<input type="radio" name="storage" value="64"/>
<div class="thumbnail input1">
<img src="images/64gb.png" alt="...">
</div>
</label>
</div>
<div id="storage128" class="col-sm-12 col-md-2">
<label>
<input type="radio" name="storage" value="128"/>
<div class="thumbnail input1">
<img src="images/128gb.png" alt="...">
</div>
</label>
</div>
</div>
</div>
</div>
<div id="conditionPanel" class="panel panel-default">
<div class="panel-heading" role="tab" id="headingCondition" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#condition" aria-expanded="false" aria-controls="condition">
<h4 class="panel-title">
<a class="btn-3 btn-block btn-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Step 3: What Is The Condition? <span data-toggle="tooltip" data-placement="left" title="Ensure that you accurately choose the condition that bests describes this device." class="glyphicon glyphicon-info-sign" style="float:right"></span>
</a>
</h4>
</div>
<!---condition inputs--->
<div id="condition" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCondition" data-parent="#accordion">
<div class="panel-body" data-toggle="collapse" data-target="#condition">
<div id="condition">
<div id="condition1" class="col-sm-12 col-md-3">
<label>
<input type="radio" name="condition" value="1"/>
<div class="thumbnail input1">
<div class="btn btn-lg btn-success btn-block">Like New</h1></div>
<div class="caption">
<p>"Like New" phones look brand new, and have no signs of use. Very few phones are in this condition.</p>
</div>
</div>
</label>
</div>
<hr class="hidden-md hidden-lg">
<div id="condition2" class="col-sm-12 col-md-3">
<label>
<input type="radio" name="condition" value="2"/>
<div class="thumbnail input1">
<div class="btn btn-lg btn-primary btn-block">Good</h1></div>
<div class="caption">
<p>"Good" phones appear to be lightly used and function %100. Most phones fall in this category.</p>
</div>
</div>
</label>
</div>
<hr class="hidden-md hidden-lg">
<div id="condition3" class="col-sm-12 col-md-3">
<label>
<input type="radio" name="condition" value="3"/>
<div class="thumbnail input1">
<div class="btn btn-lg btn-warning btn-block">Cracked</h1></div>
<div class="caption">
<p>"Cracked" phones have damaged screens, but otherwise function and look like a "Good" phone.</p>
</div>
</div>
</label>
</div>
<hr class="hidden-md hidden-lg">
<div id="condition4" class="col-sm-12 col-md-3">
<label>
<input type="radio" name="condition" value="4"/>
<div class="thumbnail input1">
<div class="btn btn-lg btn-danger btn-block">Poor</h1></div>
<div class="caption">
<p>"Poor" phones may have water damage, missing buttons, heavy wear, or do not turn on.</p>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
JS：
$(function() {
//scroll back to top in index.html
$("#backtotop").on('click', function() {
$('html, body').animate({
scrollTop: $("header").offset().top
}, 350);
});
// Carrier Input
$("#carriers").one('click', function() {
$('#question').hide ();
$('html, body').animate({
scrollTop: $("#carriers").offset().top
}, 500);
});
//att
$("#att").on('click', function() {
$('#att2').show(300).siblings().hide ();
});
//verizon
$("#verizon").on('click', function() {
$('#verizon2').show(300).siblings().hide ();
});
//sprint
$("#sprint").on('click', function() {
$('#sprint2').show(300).siblings().hide ();
});
//t-mobile
$("#t-mobile").on('click', function() {
$('#t-mobile2').show(300).siblings().hide ();
});
//unlocked
$("#unlocked").on('click', function() {
$('#unlocked2').show(300).siblings().hide ();
});
//other
$("#other").on('click', function() {
$('#other2').show(300).siblings().hide ();
});
//data
$("#data").on('click', function() {
$('#data2').show(300).siblings().hide ();
});
//wifi
$("#wifi").on('click', function() {
$('#wifi2').show(300).siblings().hide ();
});
// Storage Input
$("#storage").one('click', function() {
$('#question').hide ();
$('html, body').animate({
scrollTop: $("#storage").offset().top
}, 500);
});
//8gb
$("#storage8").on('click', function() {
$('#2storage8').show(300).siblings().hide ();
});
//16gb
$("#storage16").on('click', function() {
$('#2storage16').show(300).siblings().hide ();
});
//32gb
$("#storage32").on('click', function() {
$('#2storage32').show(300).siblings().hide ();
});
//64gb
$("#storage64").on('click', function() {
$('#2storage64').show(300).siblings().hide ();
});
//128gb
$("#storage128").on('click', function() {
$('#2storage128').show(300).siblings().hide ();
});
//256gb
$("#storage256").on('click', function() {
$('#2storage256').show(300).siblings().hide ();
});
//512gb
$("#storage512").on('click', function() {
$('#2storage512').show(300).siblings().hide ();
});
//Event handler to prevent up and down key presses from changing 'condition input'
$('input[type="radio"]').keydown(function(e)
{
var arrowKeys = [37, 38, 39, 40];
if (arrowKeys.indexOf(e.which) !== -1)
{
$(this).blur();
return false;
}
});
//Condition input
$("#condition").one('click', function() {
$('#question').hide ();
$('#resultsButton, .verifyResults').slideDown(425);
$('html, body').animate({
scrollTop: $("#questions").offset().top - 50
}, 250);
});
//Like New
$("#condition1").on('click', function() {
$('#condition1-2').show(300).siblings().hide ();
});
//Good
$("#condition2").on('click', function() {
$('#condition2-2').show(300).siblings().hide ();
});
//Cracked
$("#condition3").on('click', function() {
$('#condition3-2').show(300).siblings().hide ();
});
//Poor
$("#condition4").on('click', function() {
$('#condition4-2').show(300).siblings().hide();
});
//Accordion Heading tabs
//condition header
$("#headingCondition").on('click', function() {
$('html, body').animate({
scrollTop: $("#headingCondition").offset().top
}, 200);
});
//storage header
$("#headingStorage").on('click', function() {
$('html, body').animate({
scrollTop: $("#headingStorage").offset().top
}, 200);
});
//carrier header
$("#headingCarrier").on('click', function() {
$('html, body').animate({
scrollTop: $("#headingCarrier").offset().top
}, 200);
});
//Hidden Thumbnails
$(".carrierValue").on('click', function() {
$('#carriers').collapse('show');
$('html, body').animate({
scrollTop: $("#headingCarriers").offset().top
}, 500);
});
$("#storageValue").on('click', function() {
$('#storage').collapse('show');
$('html, body').animate({
scrollTop: $("#headingStorage").offset().top
}, 500);
});
$("#conditionValue").on('click', function() {
$('#condition').collapse('show');
$('html, body').animate({
scrollTop: $("#headingCondition").offset().top
}, 500);
});
// Verification message
$("#verifySelection").on('click', function() {
$('html, body').animate({
scrollTop: $("#logo").offset().top
}, 500);
});
$(".btn-group").on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top - 300
}, 350);
});
});
// Form validation, returns alert "Please enter (missing value)" on submit if one of the radio buttons did not get clicked.
function validateForm() {
var x = document.forms["selection"]["carrier"].value;
var y = document.forms["selection"]["storage"].value;
var z = document.forms["selection"]["condition"].value;
if (x == null || x == "") {
alert("Please enter a 'Carrier'");
return false;
}
if (y == null || y == "") {
alert("Please enter a 'Storage' value");
return false;
}
if (z == null || z == "") {
alert("Please enter a 'Condition' value");
return false;
}
}
// Form Validation for models with no storage option
function validateForm2() {
var x = document.forms["selection"]["carrier"].value;
var z = document.forms["selection"]["condition"].value;
if (x == null || x == "") {
alert("Please enter a 'Carrier'");
return false;
}
if (z == null || z == "") {
alert("Please enter a 'Condition' value");
return false;
}
}
//initialize tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
最佳答案
鉴于您提供的信息，这是我为您提供的一个很好的答案：
这听起来像Boolean flag的工作。
它的工作方式是拥有一个变量，例如hasAccordianBeenClosed，然后将其设置为false。
在关闭的代码运行之前，添加一个检查是否为true。运行后，将该变量设置为true，它将不再运行。