如果元素没有子元素，如何将 Class 名称添加到元素

Question

How can I add to the .parent-pages if it has no children ( .child ). For example, if you click on Fabrication & Panels, the children should show up because it has them. But if you click on Underlayment, for example, it should take you immediately to that page.

Here's the Codepen: https://codepen.io/elemusma/pen/gOpVvqz
And here a page example: 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

How can I add to the .parent-pages if it has no children ( .child )

You can check this using querySelectorAll() like:

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

If I understood your question (which you formulated in a convoluted manner) is what you are looking for?

 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>

[update] You can also use 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>