<div class="mobile-nav">
        <ul class="menu">
        <li class="dropdown">
            <a href="#">Menu +</a>
            <ul class="dropdown-menu">
                <li><a href="http://google.com">google</a></li>
                <li><a href="#">submenu</a></li>
                <li><a href="#">submenu</a></li>
                <li><a href="#">submenu</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Menu +</a>
            <ul class="dropdown-menu">
                <li><a href="#">submenu</a></li>
                <li><a href="#">submenu</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Menu +</a>
            <ul class="dropdown-menu">
                <li><a href="#">submenu</a></li>
                <li><a href="#">submenu</a></li>
            </ul>
        </li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
    </ul>

 
</div>

.dropdown .dropdown-menu {
    display: none;
}
.dropdown.open>.dropdown-menu {
    display: block;
}
$('.mobile-nav').on('click', '.dropdown > a', function (e) {
  
//$(this).toggleClass('open').siblings(".dropdown").removeClass('open');
    $(this).closest('.dropdown').toggleClass('open').siblings(".dropdown").removeClass('open');

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js