JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dl_parent">
    <div class="dl_link">PAGE LINK 1</div>
    <div class="dl_sub_dd">
        <ul>
            <li>sub page</li>
            <li>sub page</li>
        </ul>
    </div>
</div>

<div class="dl_parent">
    <div class="dl_link">PAGE LINK 2</div>
    <div class="dl_sub_dd">
        <ul>
            <li>sub page</li>
            <li>sub page</li>
        </ul>
    </div>
</div>

CSS

/*LINK------------------------*/
.dl_link {
    cursor:pointer;
}

/*DROPMENU--------------------*/
.dl_sub_dd {
    display:none;
}

JavaScript

$(window).on('load',function(){
//CLICK-HANDLERS=============================
    $('.dl_link').click(function(){
        var submenu = $(this).parent().children('.dl_sub_dd');
        if (submenu.css('display') == 'none') {
            $('.dl_sub_dd').hide(); //first hide any previously showing submenu's
            submenu.show(); //then show the current submenu
        } else {
            submenu.hide(); //hide the current submenu again
        }
    });
});