@NJVS
Posted
Hi, Abdul. Congrats for completing the challenge.
Regarding your dropdowns, I've notice that the <li id="features">
and <li id="company">
has the same click event. You can just assign a identical class name for your dropdown like this <li class="dropdown">
then select both of them in javascript then run a forEach()
method then add click event(thats a lot of "then" LOL). Also, instead of toggling class for sub-menu
, <a>
and <i class="fa-solid">
, I suggest to just toggle a class on their parent element.
const dropdowns = document.querySelectorAll("li.dropdown");
dropdowns.forEach(dropdown => {
dropdown.addEventListener("click", function(event) {
event.currentTarget.classList.toggle("active");
});
});
.dropdown.active > a {
font-weight: 700;
}
.dropdown.active > a i.fa-solid {
transform: rotate(180deg);
}
.dropdown.active > .sub-menu {
display: block;
}
Marked as helpful
@abymani
Posted
@NJVS Thanks a lot. I have learned something new from you. you are awesome. :)