JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<nav class="menu">
        <ul class="main-ul">
            <li><a href="#">Home</a></li>
            <li class="main-ul__catalog">
                <span>Top Dating Sites</span>
                <ul class="main-ul__catalog-ul">
                    <li><a href="#">Wedding Jewellery</a></li>
                    <li><a href="#">Wedding Jewellery22</a></li>
                    <li><a href="#">Another item2</a></li>
                    <li><a href="#">Another item3</a></li>
                </ul>
            </li>

            <li class="main-ul__catalog">
                <span>Find Dating Sites by...</span>
                <ul class="main-ul__catalog-ul">
                    <li class="arrow">
                        <span>Geography / Location</span>
                        <ul class="ul-jewellery">
                            <li><a href="#"><span>U.S.A.</span></a></li>
                            <li><a href="#"><span>United Kingdom (UK)</span></a></li>
                            <li><a href="#"><span>Canada</span></a></li>
                            <li><a href="#"><span>Australia</span></a></li>
                        </ul>
                    </li>
                    <li class="arrow">
                        <span>Ethnicity / Nationality</span>
                        <ul class="ul-jewellery">
                            <li>
                                <span>Asian</span>
                                <ul class="ul-jewellery">
                                    <li><a href="/thai-dating/"><span>Thai</span></a></li>
                                    <li><a href="/filipino-dating/"><span>Filipino</span></a></li>
                                    <li><a href="/japanese-dating/"><span>Japanese</span></a></li>
                                    <li><a href="/korean-dating/"><span>Korean</span></a></li>
                                    <li><a href="/chinese-dating/"><span>Chinese</span></a></li>
                                </ul>
                 ...

CSS

.main-ul__catalog-ul {
  display: none;
}

.ul-jewellery {
  display: none;
}

JavaScript

(function(){
    var menu = document.querySelector('.menu');
    function openCatalog(event) {
        event.preventDefault();
        var elem = event.target;

        if(elem.parentElement.parentElement.parentElement.className === 'menu'){
            if(!elem.nextElementSibling){
                document.querySelectorAll('.menu ul[style="display: block;"]').forEach(i=>i.style.display = "none");
            } else if(elem.nextElementSibling.style.display !== "block"){
                document.querySelectorAll('.menu ul[style="display: block;"]').forEach(i=>i.style.display = "none");
            }
        } else if(elem.parentElement.parentElement.className === 'main-ul__catalog-ul'){
            if(!elem.nextElementSibling){
                document.querySelectorAll('.main-ul__catalog-ul ul[style="display: block;"]').forEach(i=>i.style.display = "none");
            } else if(elem.nextElementSibling.style.display !== "block"){
                document.querySelectorAll('.main-ul__catalog-ul ul[style="display: block;"]').forEach(i=>i.style.display = "none");
            }
        }
        if(elem.nextElementSibling){
            elem.nextElementSibling.style.display === 'block' 
                ? elem.nextElementSibling.style.display = 'none'
                : elem.nextElementSibling.style.display = 'block';
        }
    }
    menu.addEventListener('click', openCatalog, false);
})();