如果语句在函数之后没有继续前进，则出现 Javascript 错误

如何解决如果语句在函数之后没有继续前进，则出现 Javascript 错误

我使用 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');}
    }
});

对此我想补充的是一次只能打开一个

我正在尝试这样做，但不适用于所有场景

1. 不应同时打开所有选项卡，如轿车类别可见，其他选项卡不可见。 - 这只是第一次工作

2. 所有类别标签都应切换显示/隐藏 - 这不起作用

   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');}
       }
   });