I need help creating a customized navigation bar. I want the Services and Plans list items to display drop-down menus when clicked. However, instead of working as expected, I'm encountering an error message that says: 'cannot read property contains of undefined'. My goal is to select the sub-menu class and add the sub-menu-active class (which is set in my CSS to display as block). Initially, I have set the display property in my CSS file to 'none'.
Here is the HTML file I am working with:
<nav class="custom-navigationbar-container" >
<ul class="menu">
<li class="logo"><a href="#">Home</a></li>
<li class="item"><a href="#">About</a></li>
<li class="item"><a href="#">Blog</a></li>
<li class="item special">
<a tabindex="0">Services <i class="fas fa-sort-down"></i></a>
<ul class="sub-menu" >
<li class="sub-item" ><a href="#">Web Design</a></li>
<li class="sub-item" ><a href="#">Web Development</a></li>
<li class="sub-item" ><a href="#">SEO</a></li>
<li class="sub-item" ><a href="#">Digital Marketing</a></li>
</ul>
</li>
<li class="item special has-sub-menu">
<a tabindex="0">Plans <i class="fas fa-sort-down"></i></a>
<ul class="sub-menu">
<li class="sub-item" ><a href="#">Freelancer</a></li>
<li class="sub-item" ><a href="#">StartUp</a></li>
<li class="sub-item" ><a href="#">Enterprise</a></li>
</ul>
</li>
<li class="item" ><a href="#">Blog</a></li>
<li class="item" ><a href="#">Contact</a></li>
<li class="item button" ><a href="#">Log In</a></li>
<li class="item button secondary" ><a href="#">Sign Up</a></li>
<li class="toggle"><a href="#"><i class="fas fa-bars" ></i></a></li>
</ul>
</nav>
This is the .Js code
const special = document.querySelectorAll(".special");
const specialToggle = function(){
const subMenu = this.getElementsByClassName('sub-menu');
if(subMenu.classList.contains(".sub-menu-active")){
console.log('I am removing sub-menu-active now');
ul.classList.remove('.sub-menu-active');
}else{
console.log('I am adding sub-menu-active now');
ul.classList.add('.sub-menu-active');
}
};
for(const specials of special){
specials.addEventListener('click', specialToggle)
}