CODEWITHSUNDEEP
javascriptjqueryhtmlvue.js
Ajharali
Ajharali

Reputation: 33

toggle the menu after the sub-menu is once selected

<div id="dl-menu" class="dl-menuwrapper"> Menu <i class="fas fa-arrow-right"></i>
                                                <button class="dl-trigger">Open Menu</button>
                                                <ul class="dl-menu">
                                                    <li>
                                                        <a href="#">Masters</a>
                                                        <ul class="dl-submenu">
                                                            <li class="nav-item"><router-link class="nav-link" to="/product-list">Items</router-link></li>
                                                            <li class="nav-item"><router-link class="nav-link" to="/types-list">Types</router-link></li>
                                                            <li class="nav-item"><router-link class="nav-link" to="/admin" href="javascript:myFunction_1();>">Admin</router-link></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#">Reports</a>
                                                        <ul class="dl-submenu">
                                                            <li><a href="#">Sales Analysis</a></li>
                                                            <li><a href="#">Discounts &amp; Tax Returns</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>

i have tried some of the techniques but not working one of that is below

$('#dl-menu ul li')
.on('click', function(){
$(this).find('ul').toggle();
})

i want to hide the menu once the submenu got clicked like in this when item is clicked it should run the router-link and should hide the submenu.

Upvotes: 1

Views: 346

Answers (1)

Bilal Siddiqui
Bilal Siddiqui

Reputation: 3629

Since your menu and submenu both have li and a tags. It will be ambiguos and clicking any will trigger twice,

You need two selectors

$('.dl-submenu li') // for submenus li

and

$('#dl-menu > ul > li > a') // for menus direct anchor tags

$('.dl-submenu li, #dl-menu > ul > li > a').on('click', function() {
    $(this).closest('ul').toggle();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dl-menu" class="dl-menuwrapper"> Menu <i class="fas fa-arrow-right"></i>
<button class="dl-trigger">Open Menu</button>
<ul class="dl-menu">
    <li>
        <a href="#">Masters</a>
        <ul class="dl-submenu">
            <li class="nav-item"><router-link class="nav-link" to="/product-list">Items</router-link></li>
            <li class="nav-item"><router-link class="nav-link" to="/types-list">Types</router-link></li>
            <li class="nav-item"><router-link class="nav-link" to="/admin" href="javascript:myFunction_1();>">Admin</router-link></li>
        </ul>
    </li>
    <li>
        <a href="#">Reports</a>
        <ul class="dl-submenu">
            <li><a href="#">Sales Analysis</a></li>
            <li><a href="#">Discounts &amp; Tax Returns</a></li>
        </ul>
    </li>
</ul>

Upvotes: 2

Related Questions