Resolved: Javascript targeting the first element only with a double click issue

Question:

I’m learning JavaScript at the moment (started 3 weeks ago at college) and i’m struggling to create a mobile menu whereby you click and that reveals or hides a hidden menu.
The issue here is that JS only targets the first class and not all of them. And you need to click twice to reveal the element that does work.
I would be very grateful for some guidance, and hopefully an expiation to help me understand the problem.
Thank you

<script>
const btn = document.querySelector('.navigation-main-mobile .menu-item-has-children');
const box = document.querySelector('.navigation-main-mobile .menu-item-has-children .sub-menu');

btn.addEventListener('click', function handleClick() {
if (box.style.display === 'none') {
    box.style.display = 'block';
} else {
    box.style.display = 'none';
}
});
</script>

<ul id="menu-primary-menu" class="navigation-main-mobile"><li><a href="/">Text</a></li>
    <li class="menu-item-has-children"><a href="#">Text</a>
        <ul class="sub-menu">
            <li><a href="http://1.io/1/1/">Text</a></li>
            <li><a href="http://1.io/2/2/">Text</a></li>
            <li><a href="http://1.io/3/3/">Text</a></li>
        </ul>
    </li>
    <li class="current-menu-item"><a href="/news/" aria-current="page"></a>Text</a></li>
    <li class="menu-item-has-children"><a href="#"></a>Text</a></li>
        <ul class="sub-menu">
            <li><a href="http://1.io/4/">Text</a></li>
            <li><a href="http://1.io/5/">Text</a></li>
            <li><a href="http://1.io/6/">Text</a></li>
            <li><a href="/about/">Text</a></li>
        </ul>
    </li>
</ul>

Answer:

You have to find all nodes which match the selector. querySelectorAll is used for that. Then you must loop through all the nodes and set the event. Also, you have to remove the wrong closing <li> tag (which messes up the selector) after </a>Text</a> in the second menu-item-has-children

const btns = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children');
const boxs = document.querySelectorAll('.navigation-main-mobile .menu-item-has-children .sub-menu');


btns.forEach((btn, index) => {
btn.addEventListener('click', function handleClick() {
if (boxs[index].style.display === 'none') {
    boxs[index].style.display = 'block';
} else {
    boxs[index].style.display = 'none';
}
})});

If you have better answer, please add a comment about this, thank you!

Resolved: Javascript targeting the first element only with a double click issue

Resolved: CMake path for python3 libraries doesn’t change (windows 10)

Resolved: GLMM with quasi-Poisson distribution

Resolved: Is it possible to do custom preinstall scripts for npm from which one is run depending on the environment?

Leave A Reply