问题描述
我使用 javascript 创建了一个标签下拉模块,它工作正常
const service = document.querySelectorAll('[data-step-id="service"]');
const category = service[1].querySelectorAll('.service_category');
const sedan = category[0];
const suv = category[1];
const others = category[2];
const monthlypackages = category[3];
const servicecard = service[1].querySelectorAll('.service_card');
// onclick Sedan Category The first 4 service cards from(0-3) will show/hide
sedan.addEventListener('click',function() {
for (var i = 0; i < 4; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick SUV Category The 4 service cards from(4-7) will show/hide
suv.addEventListener('click',function() {
for (var i = 4; i < 8; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick Others Category The 3 service cards from(8-10) will show/hide
others.addEventListener('click',function() {
for (var i = 8; i < 11; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
// onclick monthlypackages Category The last 3 service cards from(11-13) will show/hide
monthlypackages.addEventListener('click',function() {
for (var i = 11; i < servicecard.length; i++){
if (servicecard[i].classList.contains('h-hide')){
servicecard[i].classList.remove('h-hide');
}
else {servicecard[i].classList.add('h-hide');}
}
});
对此我想补充的是一次只能打开一个
我正在尝试这样做,但不适用于所有场景
-
不应同时打开所有选项卡,如轿车类别可见,其他选项卡不可见。 - 这只是第一次工作
-
const sedanfirstchild = servicecard[0]; const suvfirstchild = servicecard[4]; const otherfirstchild = servicecard[8]; const monthlypackagesfirstchild = servicecard[11]; function sedannone() { if (sedanfirstchild.classList.contains('h-hide')){ console.log('Sedan is not Visible'); } else { sedan.click(); } } function suvnone() { if (suvfirstchild.classList.contains('h-hide')){ console.log('SUV is not Visible'); } else { suv.click(); } } function othersnone() { if (otherfirstchild.classList.contains('h-hide')){ console.log('Others is not Visible'); } else { others.click(); } } function monthlypackagesnone() { if (monthlypackagesfirstchild.classList.contains('h-hide')){ console.log('monthly packages is not Visible'); } else { monthlypackages.click(); } } // onclick Sedan Category The first 4 service cards from(0-3) will show/hide sedan.addEventListener('click',function() { for (var i = 0; i < 4; i++){ if (servicecard[i].classList.contains('h-hide')){ suvnone(); othersnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick SUV Category The 4 service cards from(4-7) will show/hide suv.addEventListener('click',function() { for (var i = 4; i < 8; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); othersnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick Others Category The 3 service cards from(8-10) will show/hide others.addEventListener('click',function() { for (var i = 8; i < 11; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); suvsnone(); monthlypackagesnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } }); // onclick monthlypackages Category The last 3 service cards from(11-13) will show/hide monthlypackages.addEventListener('click',function() { for (var i = 11; i < servicecard.length; i++){ if (servicecard[i].classList.contains('h-hide')){ sedannone(); suvnone(); othersnone(); servicecard[i].classList.remove('h-hide'); } else {servicecard[i].classList.add('h-hide');} } });
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)