Как добавить имя класса к элементу, если у него нет детей

Question

Как добавить к .parent-pages, если у него нет детей (.child). Например, если вы нажмете на «Изготовление и панели», дети должны появиться, потому что они есть. Но если вы, например, нажмете на «Подложка», она сразу же приведет вас на эту страницу.

Вот кодекс: https://codepen.io/elemusma/pen/gOpVvqz
А вот пример страницы: https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/

HTML

<div class="col-md-3 sidebar pt-5 pb-5">

<div class="col-sm-12 col-12 p-0 parent-pages activate">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/" class="parent">Flat Stock &amp; Coil</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/copper/" class="child">Copper</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/painted-steel/" class="child">Painted Steel</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/other/" class="child">Other</a>
</div>

</div>
<!-- end of new query for child pages -->

</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/" class="parent">Fabrication &amp; Panels</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/corrugated-panels/" class="child">Corrugated Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/standing-seam-panels/" class="child">Standing Seam Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/exposed-fastener-panels/" class="child">Exposed Fastener panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/wall-and-soffit-panels/" class="child">Wall and Soffit Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/custom-trim-packages/" class="child">Custom Trim Packages</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/roofing-and-architectural-details/" class="child">Roofing and Architectural Details</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/gutter-downspout-and-rainware-accessories/" class="child">Gutter, Downspout, and Rainware Accessories</a>
</div>

</div>
<!-- end of new query for child pages -->

</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/" class="parent">Rain Goods</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/subcategory-1/" class="child">Subcategory 1</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/subcategory-2/" class="child">Subcategory 2</a>
</div>
</div>
<!-- end of new query for child pages -->

</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/metal-roofing-accessories/" class="parent">Metal Roofing Accessories</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

 <div class="child-links">
</div>
</div>
<!-- end of new query for child pages -->

</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/heat-cable-ice-melt/" class="parent">Heat Cable/Ice Melt</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

<div class="child-links">
                                     </div>
</div>
<!-- end of new query for child pages -->
</div>
                                           <div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/underlayment/" class="parent">Underlayment</a>

<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">

<div class="child-links">
</div>
</div>
<!-- end of new query for child pages -->
</div>                        
</div>

CSS

.col-md-3.sidebar {
    background: #f7f7f7;
    border-radius: 4px;
}
.sidebar a.parent {
    color: #94752c;
    font-weight: 600;
}
.sidebar a.parent:before {
    content: ">";
    margin-right: 9px;
    color: #b8ae97;
}
.parent-pages{
    cursor: pointer;
}
.parent-pages a{
    pointer-events: none;
}
.parent-pages.activate a{
    pointer-events: all;
}
a.child {
    display: block;
    color: #b8ae97;
}
.child-links {
    height: 0;
    opacity: 0;
    transition: .15s ease-out;
}
.parent-pages.activate .child-links {
    height: 100%;
    opacity: 1;
    transition: 1s ease-in;
}

JavaScript

document.querySelector('.sidebar').addEventListener("click", function(event) {

    let activeTab = event.target.classList.contains("activate");

    document.querySelectorAll(".parent-pages").forEach(function(panel){
        panel.classList.remove("activate");
        // panel.previousElementSibling.classList.remove("active");
      });

      if(!activeTab){
        // Then show the clicked panel which is accessible as event.target
        event.target.classList.add("activate");
        // var panel = event.target.nextElementSibling;
        // panel.style.maxHeight = panel.scrollHeight + "px";
      }

})
document.querySelector('.parent-pages:first-child').classList.add('activate');

Answer 1

Как добавить к .parent-pages, если у него нет детей (.child)

Вы можете проверить это, используя querySelectorAll(), например:

if (!document.querySelector('.parent-pages').querySelectorAll('.child').length) 
{
   // Parent pages have no child element with class `.child`
   document.querySelector('.parent-pages').classList.add('activate');
}

Answer 2

Если я понял, что ваш вопрос (который вы сформулировали в запутанном виде) - это то, что вы ищете?

document.querySelectorAll('.elephant')
        .forEach(el=>
          {
          if (!el.hasChildNodes())
            {
            el.parentNode.classList.add('alone')
            }
          })

.parent-pages {
  min-height:1em;
  border: 5px solid grey;
  margin:1em;
  padding:.4em;
}

.alone { border-color: red; }

<div class="parent-pages">
  <div class="elephant">
    <div> bob </div>
    <div> paul </div>
  </div>
</div>

<div class="parent-pages">
  <div class="elephant"></div>
</div>

[обновить] Вы также можете использовать element.closest ()

document.querySelectorAll('.elephant')
        .forEach(el=>
          {
          if (!el.hasChildNodes())
            {
            el.closest('div.parent-pages').classList.add('alone')
            }
          })

.parent-pages {
  min-height:1em;
  border: 5px solid grey;
  margin:1em;
  padding:.4em;
}

.alone { border-color: red; }

<div class="parent-pages">
  <a href="#" class="parent">a element</a>
  <div class="child-pages">
    <div class="child-links">
      <div class="elephant">
        <div> bob </div>
        <div> paul </div>
      </div>
    </div>
  </div>
</div>


<div class="parent-pages">
  <a href="#" class="parent">b element</a>
  <div class="child-pages">
    <div class="child-links">
      <div class="elephant"></div>
    </div>
  </div>
</div>