1
我正在處理大型問答的一部分表單中的一個頁面上有一個手風琴，您可以在這裏查看。摺疊當前div展開按鈕上的下一個div點擊
http://jsfiddle.net/Covanant/rxpdz2q9/
形式的工作方式是，當你在一個手風琴回答一個問題，它縮短然後展開接下來的手風琴，與複選框的異常，因爲這些可以有多個選擇。
我有一個名爲「Next」的複選框，默認情況下該按鈕將被隱藏，我想要做的是一旦選中複選框，「Next」按鈕將淡入，按鈕被點擊摺疊當前手風琴並擴展下一個。
現在所有的工作是摺疊當前元素的點擊。
下面的代碼。
$(document).ready(function() {
$(".accordion_head").click(function() {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(300);
$(".updown").text('\u25BC');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(300);
$(this).children(".updown").text('\u25BC');
} else {
$(this).next(".accordion_body").slideDown(300);
$(this).children(".updown").text('\u25B2');
}
});
});
$(".accordion_body select").change(function() {
nextQuestion($(this));
});
$(".accordion_body input").change(function() {
nextQuestion($(this));
});
$(".next-button").click(function() {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(300);
$(".updown").text('\u25BC');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideDown(300);
$(this).children(".updown").text('\u25BC');
} else {
$(this).next(".accordion_body").slideDown(300);
$(this).children(".updown").text('\u25B2');
}
});
function nextQuestion(currentQuestion) {
var parentEle = currentQuestion.parents(".accordion_main");
if (parentEle.next()) {
parentEle.find(".question-mark").addClass("glyphicon glyphicon-ok check-mark").removeClass("question-mark").text("");
if (currentQuestion.attr('type') != 'checkbox') {
if (parentEle.next().find(".accordion_head").length > 0) {
parentEle.next().find(".accordion_head").click();
} else {
//there is no next--> try to go to the next colum
parentEle.parent("div").next("div").find(".accordion_head").first().click();
}
}
}
}.accordion_container {
width: 100%;
padding: 1em;
}
.accordion_head {
background-color: #FFF;
color: #555;
cursor: pointer;
font-family: arial;
font-size: 14px;
margin: 10px 0 0px 0px;
padding: 10px 11px;
font-weight: bold;
border: 1px solid #ddd;
}
.accordion_body {
background: #EEE;
padding: 1em;
}
.accordion_body p {
padding: 18px 5px;
margin: 0px;
}
.check-mark,
.question-mark {
border-style: solid;
border-width: 1px;
border-radius: 50%;
float: right;
height: 28px;
line-height: 16px;
padding: 5px;
position: relative;
width: 28px;
text-align: center;
top: -4px;
}
.check-mark {
border-color: #c4db30;
color: #c4db30;
}
.question-mark {
border-color: #086cff;
color: #086cff;
font-size: 1.3em;
}
.plusminus {
float: left;
margin-right: 10px;
}
.next-button {
/* display: none; */
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form action="demo_form.aspx" method="get">
<div class="accordion_container">
<p>Answer all question below to complete the order request</p>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-6">
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> What type of sensors are required? <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: block;">
<select>
<option value="sensors">None Selected</option>
<option value="sensors">Photocell On</option>
<option value="sensors">Off Control Only</option>
<option value="sensors">Photocell On/Off Control Only</option>
</select>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="plusminus">▼</span> Please select if the below products are present/required. <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<div class="row">
<div class="col-xs-6">
<input type="checkbox" name="products" value="nWifi">nWifi (nLight)
<br>
<input type="checkbox" name="products" value="nLightFixtures">nLightFixtures
<br>
<input type="checkbox" name="products" value="xCella">xCella (LC&D)
<br>
</div>
<div class="col-xs-6">
<input type="checkbox" name="products" value="DaylightHarvesting">Daylight Harvesting
<br>
<input type="checkbox" name="products" value="xPoint">xPoint (LC&D)
<br>
<input type="checkbox" name="products" value="GraphicsSoftare">Graphics Sofware
<br>
</div>
</div>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> What type of construction is this? <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="radio" name="contruction" value="NewConstruction" />New Construction
<br>
<input type="radio" name="construction" value="Retrofit" />Retrofit
<br>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Scope of work <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="radio" name="work" value="AllAreas" />New Construction
<br>
<input type="radio" name="work" value="Retrofit" />Retrofit
<br>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> BMS Integration <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<div class="row">
<div class="col-xs-6">
<input type="checkbox" name="bms-integration" value="BACnetIP">BACnet IP
<br>
<input type="checkbox" name="bms-integration" value="BACnetMSTP">BACnet MSTP
<br>
<input type="checkbox" name="bms-integration" value="Modbus">Modbus
<br>
</div>
<div class="col-xs-6">
<input type="checkbox" name="bms-integration" value="LonWorks">LonWorks
<br>
<input type="checkbox" name="bms-integration" value="Metasys">Metasys
<br>
<input type="checkbox" name="bms-integration" value="Other">Other
<br>
</div>
</div>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Dimming Information <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="checkbox" name="dimming-information" value="TenV">0-10V
<br>
<input type="checkbox" name="dimming-information" value="DALI">DALI
<br>
<input type="checkbox" name="dimming-information" value="TwoW">2W
<br>
<input type="checkbox" name="dimming-information" value="threeW">3W
<br>
<input type="checkbox" name="dimming-information" value="Other">Other
<br>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
</div>
<!-- end .col-xs-6 -->
<div class="col-xs-12 col-md-6 col-lg-6">
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Voltages Used <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="checkbox" name="voltage" value="volt120">120/277
<br>
<input type="checkbox" name="voltage" value="volt208">208
<br>
<input type="checkbox" name="voltage" value="volt347">347
<br>
<input type="checkbox" name="voltage" value="volt480">480
<br>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Interfaces <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="checkbox" name="interfaces" value="BAS">BAS/HVAC
<br>
<input type="checkbox" name="interfaces" value="AV">A/V System
<br>
<input type="checkbox" name="interfaces" value="Shades">Shades
<br>
<input type="checkbox" name="interfaces" value="LightingControlSystems">Other Lighting Control Systems
<br>
<input type="checkbox" name="interfaces" value="Other">Other
<br>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Maintain switch ganging configurations? <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="radio" name="switch ganging" value="Yes">Yes
<br>
<input type="radio" name="switch ganging" value="No">No
<br>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Emergency Design <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="checkbox" name="emergency design" value="Generator">Generator
<br>
<input type="checkbox" name="emergency design" value="Battery">Battery
<br>
<input type="checkbox" name="emergency design" value="GTD">GTD
<br>
<input type="checkbox" name="emergency design" value="Shunting Required">Shunting Required
<br>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> Energy Code Compliance (Also Provide Version if Selected) <span class="question-mark" aria-hidden="true">?</span>
</div>
<div class="accordion_body" style="display: none;">
<input type="checkbox" name="energy code compliance" value="IECC">IECC
<br>
<input type="checkbox" name="energy code compliance" value="ASHRAE">ASHRAE 90.1
<br>
<input type="checkbox" name="energy code compliance" value="Title24">Title 24
<br>
<input type="checkbox" name="energy code compliance" value="Other">Other
<br>
<button type="button" class="btn btn-primary next-button" data-toggle="dropdown" aria-expanded="false">Next</button>
</div>
</div>
</div>
<!-- end .col-xs-6 -->
</div>
<!-- end .accordion_container -->
</form>
如果這些部分是硬編碼這樣的（這可能不是最好的方法），你可以使用'數據 - '屬性來確定下一個面板，當你按下'Next（下一個）'鍵時打開。或者使用jQuery來確定最接近的兄弟並切換它。 –