【发布时间】：2020-10-02 09:32:15
【问题描述】：
我有一个使用单选按钮和 JavaScript/jQuery 的相对简单的嵌套问题设置，它根据您单击的按钮显示/隐藏额外信息（是显示，否隐藏）：
这是 HTML：
<div class="form-nest panel-question d-flex justify-content-start">
<span class="icon icon-primary icon-medium icon-roundel icon-vehicle align-self-start mr-2 mr-md-4"></span>
<div class="question-wrapper">
<h2 class="heading-epsilon">Are you interested in RAC Breakdown Cover for complete peace of mind?</h2>
<!-- Yes/no Open-->
<div class="form-row form-inline">
<div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio5"><label for="buttonRadio5">Yes</label></div>
<div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="radio" name="buttonRadio3" id="buttonRadio6"><label for="buttonRadio6">No</label></div>
</div>
<!-- Yes/no closed -->
</div><!--question-wrapper-->
</div><!-- Form Nest Close-->
<!--Nested container open -->
<div class="nested-container">
<div id="buttonRadio5-nest" class="nested-content">
<ul class="list list-icons">
<li class="list-item list-icon list-icon-tick">Pays out regardless of whether the accident was fault or non-fault</li>
<li class="list-item list-icon list-icon-tick">Covers named drivers and passengers</li>
<li class="list-item list-icon list-icon-tick">Covers the policy holder when driving other vehicles if they don't own the vehicle</li>
</ul>
<a href="#">View more product information</a>
<p><strong>+ £40.00</strong> per year</p>
<div class="form-row form-inline">
<div class="form-check form-check-inline"><input class="form-check-input form-check-input-button" type="checkbox" name="buttonCheckbox1" id="buttonCheckbox1"><label for="buttonCheckbox1">Add</label></div>
</div>
</div>
</div><!-- Nested container closed -->
还有 JS/jQuery：
function nestedPanelHide(ele) {
var eleId = "#" + ele,
nestWrap = $(eleId).closest(".form-nest"),
nestCont = nestWrap.next(".nested-container");
nestCont.children().hide();
}
function nestedPanelShow(ele) {
var eleId = "#" + ele,
nestWrap = $(eleId).closest(".form-nest"),
nestCont = nestWrap.next(".nested-container"),
eleNestId = eleId + "-nest",
nestFields = nestCont.children(eleNestId);
nestedPanelHide(ele);
nestFields.show();
}
$(document).ready(function(){
$(".nested-content").hide();
// Find each form with nest class
$(".form-nest").each(function( index ) {
// Find nest conts
var nest = $(this),
nestCont = nest.next(".nested-container");
// For each nest cont
for (var i = 0; i < nestCont.length; i++) {
// Find nest opts in cont
var nestOpt = nestCont[i].children;
// For each nest opt add click event
for (var j = 0; j < nestOpt.length; j++) {
// Get cont id, trim to form ele id
var id = nestOpt[j].id,
str = id.substr(0, id.lastIndexOf("-")),
eleId = "#" + str;
// Add class to ele to remove from later look up
$(eleId).parent().addClass("nest-btn");
// Add show event listener to ele
$(eleId).on("click", function() {
var id = $(this).attr("id");
nestedPanelShow(id);
});
}
}
// Find nest opts
var nestOpts = nest.children();
// For each nest opt
for (var k = 0; k < nestOpts.length; k++) {
// Get this opt
var opt = $(nestOpts[k]);
// If opt does not have class nest-btn
if (!opt.hasClass("nest-btn")) {
// Add hide event listener to opt
$(opt.children()).on("click", function() {
var id = $(this).attr("id");
nestedPanelHide(id);
});
}
}
});
});
function nestedPanelHide(ele) {
var eleId = "#" + ele,
nestWrap = $(eleId).closest(".form-nest"),
nestCont = nestWrap.next(".nested-container");
nestCont.children().hide();
}
function nestedPanelShow(ele) {
var eleId = "#" + ele,
nestWrap = $(eleId).closest(".form-nest"),
nestCont = nestWrap.next(".nested-container"),
eleNestId = eleId + "-nest",
nestFields = nestCont.children(eleNestId);
nestedPanelHide(ele);
nestFields.show();
}
$(document).ready(function(){
$(".nested-content").hide();
// Find each form with nest class
$(".form-nest").each(function( index ) {
// Find nest conts
var nest = $(this),
nestCont = nest.next(".nested-container");
// For each nest cont
for (var i = 0; i < nestCont.length; i++) {
// Find nest opts in cont
var nestOpt = nestCont[i].children;
// For each nest opt add click event
for (var j = 0; j < nestOpt.length; j++) {
// Get cont id, trim to form ele id
var id = nestOpt[j].id,
str = id.substr(0, id.lastIndexOf("-")),
eleId = "#" + str;
// Add class to ele to remove from later look up
$(eleId).parent().addClass("nest-btn");
// Add show event listener to ele
$(eleId).on("click", function() {
var id = $(this).attr("id");
nestedPanelShow(id);
});
}
}
// Find nest opts
var nestOpts = nest.children();
// For each nest opt
for (var k = 0; k < nestOpts.length; k++) {
// Get this opt
var opt = $(nestOpts[k]);
// If opt does not have class nest-btn
if (!opt.hasClass("nest-btn")) {
// Add hide event listener to opt
$(opt.children()).on("click", function() {
var id = $(this).attr("id");
nestedPanelHide(id);
});
}
}
});
});
(function($) {
$('.label-yes').click(function() {
$(this).closest('.nested-content').addClass('open');
});
$('.label-no').click(function() {
$(this).closest('.nested-content').removeClass('open');
});
})(jQuery);
当您单击“是”时，我可以获得要显示的额外信息，但当您单击“否”时，我无法再次隐藏它。我已经尝试逐行查看是否可以确定我的错误可能在哪里。我觉得这很简单，但我担心我可能会因为盯着它看太多代码而失明。
我在这里有一个 JSfiddle，它向您展示了我想要实现的基础 - 我已经去掉了样式，因为它可能会泄露这是给谁的（它是客户工作），但基本功能就在那里：
https://jsfiddle.net/3y4b25uk/
我们将不胜感激任何可以提供的帮助或指导，因为我正竭尽全力试图让它发挥作用，而且它已经快到了。
谢谢。
【问题讨论】：
标签： javascript html jquery forms radio-button