переключать меню после выбора подменю

Question

<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>

Я попробовал некоторые из техник, но не работает один из них ниже

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

Я хочу скрыть меню, когда в подменю щелкают, как в этом случае, когда элемент нажимается, он должензапустите роутер-линк и должны скрыть подменю.

Answer 1

Поскольку ваше меню и подменю имеют теги li и a. Это будет двусмысленность, и нажатие на любую из них сработает дважды,

Вам понадобятся два селектора

$ ('. Dl-submenu li') // для подменю li

и

$ ('# dl-menu> ul> li> a') // для меню тегов прямой привязки

$('.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>