我有一个相对简单的嵌套问题设置,使用单选按钮和JavaScriptjQuery,它可以根据你点击的按钮显示隐藏额外的信息(是显示,否隐藏)。
下面是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 -->
和JSjQuery。
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,它向你展示了我想实现的基础--我已经把样式去掉了,因为它可能会让人知道这是为谁准备的(这是客户的工作),但基本功能还是有的。
任何可以提供的帮助或指导将非常感激,因为我在我的束缚的尽头,试图让它工作,它是如此接近。
谢谢你的帮助。
你的代码有一些问题 - 没有元素与类 label-yes
和 label-no
,没有班级 open
的选择器。click()
的活动 label-yes
和 label-no
不要选择带有类的DIV nested-content
因为这个不能用 closest
. 点击 "是 "后,带有嵌套内容的div就会显示出来,而不是因为 "是"。click()
事件 label-yes
但由于你的代码中前面的click()事件,你在 $(".form-nest").each()
函数。
$(eleId).on("click", function() {
var id = $(this).attr("id");
nestedPanelShow(id);
});
为了让label-yes和label-no的click()函数能正常工作,我在输入元素中添加了这些类,在类中添加了 open
,设置 nested-content
要素 display:none
中的选择器,并通过CSS调整了 click()
事件从
$(this).closest('.nested-content')
到
$(this).closest(".form-nest").next(".nested-container").find(".nested-content")
工作实例。
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(".form-nest").next(".nested-container").find(".nested-content").addClass("open");
});
$('.label-no').click(function() {
$(this).closest(".form-nest").next(".nested-container").find(".nested-content").removeClass("open");
});
})(jQuery);
.sandbox{
.panel-question{
display: flex;
flex-direction: row;
}
.form-row.form-inline {
width: 100%;
}
}
.nested-content {
display:none;
}
.open {
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="sandbox">
<div class="container">
<div class="row">
<div class="col">
<div class="panel">
<div class="panel-content">
<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 label-yes" 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 label-no" 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 -->
</div>
</div>
</div>
</div>
</div>
</section>
注意: <div>
同级 nested-content
现在得到显示的原因有2个:一次是由于工作中的 click()
事件处理程序 label-yes
此外,由于之前的 click()
事件,调用函数 nestedPanelShow()
. 我不知道你要不要把这个删掉 click()
事件,或者重写你的代码,使你也附加一个 click()
事件到 "No "的输入,并可以省略额外的 click()
您所附加的事件 label-yes
和 label-no
. 我已经在这个事件处理程序中添加了一个控制台消息。小提琴.