选择子菜单后切换菜单

时间:2019-11-01 12:46:20

标签: javascript jquery html vue.js

Private Sub MyButton_Click(sender As Object, e As EventArgs) Handles MyButton.Click
    If MyButton.BackColor = Color.Green Then
        MyButton.BackColor = Color.Red
    Else
        MyButton.BackColor = Color.Green
    End If
End Sub

我已经尝试了一些技巧,但是下面的其中一项都不起作用

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

我想在单击子菜单后隐藏菜单,如单击此按钮时,它应该运行路由器链接并应隐藏子菜单。

1 个答案:

答案 0 :(得分:2)

由于菜单和子菜单都具有li和标签。这会造成歧义,点击任何一个都会触发两次,

您需要两个选择器

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