输入选择后如何在问答表单中 collapse/expand 手风琴
How to collapse/expand accordion in a Q&A form after input selection
不确定这是否是正确的词汇,但这是我正在努力完成的。我正在与一个团队合作开发这个大型多页问答应用程序,我的任务是让一个特定页面尽可能使用最少的屏幕空间。
我用的是手风琴,每一个里面都有一个问题,每个问题旁边都有一个问号,回答完问题后变成对勾。
我已经完成了您可以在此处看到的所有内容:
$(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_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 !important;
}
.check-mark {
border-color: #c4db30;
color: #c4db30;
}
.question-mark {
border-color: #086cff;
color: #086cff;
font-size: 1.3em;
}
.plusminus {
float: left;
margin-right: 10px;
}
<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">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-6">
<div class="accordion_head"><span class="updown">▼</span> What type of sensors are required?
<span class="glyphicon glyphicon-ok check-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 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>
</div>
<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 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 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>
</div>
<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>
</div>
</div><!-- end .col-xs-6 -->
<div class="col-xs-12 col-md-12 col-lg-6">
<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>
</div>
<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>
</div>
<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="checkbox" name="switch ganging" value="Yes"> Yes<br>
<input type="checkbox" name="switch ganging" value="No"> No<br>
</div>
<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>
</div>
<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>
</div>
</div><!-- end .col-xs-6 -->
</div><!-- end .accordion_container -->
</form>
这是我卡住的地方。
一旦我 select 回答了一个问题,我希望手风琴折叠到下一个问题,当然,它只适用于单个答案字段。
- 我select回答了上一个问题后如何扩展下一个问题?
- 如何在 select 回答后将问号更改为复选标记?
编辑以解决您的问题(这可能有点冗长——我不关心优雅)。您可以将类似这样的内容添加到您的 $(document).ready 下方。
$('.accordion_container').on('change', 'input, select', function() {
var formSection = $(this).parents('.accordion_body').first();
updateSection(formSection);
if ($(this).is('input[type=checkbox]')) {
return;
}
formSection.prev('.accordion_head').trigger('click');
if (formSection.next('.accordion_head').length) {
formSection.next('.accordion_head').trigger('click');
}
});
$('.accordion_body').each(function() {
updateSection($(this));
});
function markSectionComplete(formSection) {
var sectionHead = formSection.prev('.accordion_head'),
completeHtml = "<span class='glyphicon glyphicon-ok check-mark' aria-hidden='true'></span>";
sectionHead.find('.question-mark').replaceWith(completeHtml);
}
function markSectionIncomplete(formSection) {
var sectionHead = formSection.prev('.accordion_head'),
incompleteHtml = "<span class='question-mark' aria-hidden='true'>?</span>";
sectionHead.find('.check-mark').replaceWith(incompleteHtml);
}
function sectionComplete(formSection) {
if (formSection.find('input').length && formSection.find('input:checked').length) {
return true;
} else if (formSection.find('select').length && formSection.find('select').val() !== '') {
return true;
}
return false;
}
function updateSection(formSection) {
console.log(formSection.get(0));
if (sectionComplete(formSection)) {
markSectionComplete(formSection);
} else {
markSectionIncomplete(formSection);
}
}
当然,这会对您的表单结构做出一些假设。作为记录,我可能会以不同的方式构建 HTML,但我使用了您所拥有的,除了更正了一些错误。请特别注意,您没有为 select 列表选项设置正确的值。
你可以用 div 包围每个 "accordion"(我给它一个 class accordion_main)
添加复选标记 classes 并删除问题 class。
html 将如下所示:
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> What type of sensors are required? <span class="glyphicon glyphicon-ok check-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>
和 js:
$(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));
});
});
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();
}
}
}
}
不确定这是否是正确的词汇,但这是我正在努力完成的。我正在与一个团队合作开发这个大型多页问答应用程序,我的任务是让一个特定页面尽可能使用最少的屏幕空间。
我用的是手风琴,每一个里面都有一个问题,每个问题旁边都有一个问号,回答完问题后变成对勾。
我已经完成了您可以在此处看到的所有内容:
$(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_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 !important;
}
.check-mark {
border-color: #c4db30;
color: #c4db30;
}
.question-mark {
border-color: #086cff;
color: #086cff;
font-size: 1.3em;
}
.plusminus {
float: left;
margin-right: 10px;
}
<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">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-6">
<div class="accordion_head"><span class="updown">▼</span> What type of sensors are required?
<span class="glyphicon glyphicon-ok check-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 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>
</div>
<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 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 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>
</div>
<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>
</div>
</div><!-- end .col-xs-6 -->
<div class="col-xs-12 col-md-12 col-lg-6">
<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>
</div>
<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>
</div>
<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="checkbox" name="switch ganging" value="Yes"> Yes<br>
<input type="checkbox" name="switch ganging" value="No"> No<br>
</div>
<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>
</div>
<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>
</div>
</div><!-- end .col-xs-6 -->
</div><!-- end .accordion_container -->
</form>
这是我卡住的地方。
一旦我 select 回答了一个问题,我希望手风琴折叠到下一个问题,当然,它只适用于单个答案字段。
- 我select回答了上一个问题后如何扩展下一个问题?
- 如何在 select 回答后将问号更改为复选标记?
编辑以解决您的问题(这可能有点冗长——我不关心优雅)。您可以将类似这样的内容添加到您的 $(document).ready 下方。
$('.accordion_container').on('change', 'input, select', function() {
var formSection = $(this).parents('.accordion_body').first();
updateSection(formSection);
if ($(this).is('input[type=checkbox]')) {
return;
}
formSection.prev('.accordion_head').trigger('click');
if (formSection.next('.accordion_head').length) {
formSection.next('.accordion_head').trigger('click');
}
});
$('.accordion_body').each(function() {
updateSection($(this));
});
function markSectionComplete(formSection) {
var sectionHead = formSection.prev('.accordion_head'),
completeHtml = "<span class='glyphicon glyphicon-ok check-mark' aria-hidden='true'></span>";
sectionHead.find('.question-mark').replaceWith(completeHtml);
}
function markSectionIncomplete(formSection) {
var sectionHead = formSection.prev('.accordion_head'),
incompleteHtml = "<span class='question-mark' aria-hidden='true'>?</span>";
sectionHead.find('.check-mark').replaceWith(incompleteHtml);
}
function sectionComplete(formSection) {
if (formSection.find('input').length && formSection.find('input:checked').length) {
return true;
} else if (formSection.find('select').length && formSection.find('select').val() !== '') {
return true;
}
return false;
}
function updateSection(formSection) {
console.log(formSection.get(0));
if (sectionComplete(formSection)) {
markSectionComplete(formSection);
} else {
markSectionIncomplete(formSection);
}
}
当然,这会对您的表单结构做出一些假设。作为记录,我可能会以不同的方式构建 HTML,但我使用了您所拥有的,除了更正了一些错误。请特别注意,您没有为 select 列表选项设置正确的值。
你可以用 div 包围每个 "accordion"(我给它一个 class accordion_main)
添加复选标记 classes 并删除问题 class。
html 将如下所示:
<div class="accordion_main">
<div class="accordion_head"><span class="updown">▼</span> What type of sensors are required? <span class="glyphicon glyphicon-ok check-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>
和 js:
$(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));
});
});
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();
}
}
}
}