在三重嵌套 UL 元素上添加切换

Question

UL 的第一个嵌套似乎工作正常，但是当我单击 UL 的第二个嵌套时，我遇到的问题是它正在关闭第一个嵌套。我要显示 UL 的第二个巢穴。确切地说，我想显示 My Job Listings 的子元素。

<ul id="hb_sidebarmenu">
    <li>
        <a href="#"><div class="hb_menu_name"><i class="fa fa-home" aria-hidden="true"></i>Dashboard<i class="fa fa-angle-down" aria-hidden="true"></i></div></a>
        <ul class="submenu">
            <li><a href="#"><div class="hb_menu_name">View Profile</div></a></li>
            <li><a href="#"><div class="hb_menu_name">Edit Profile</div></a></li>
            <li><a href="#"><div class="hb_menu_name">Account Settings</div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="hb_menu_name"><i class="fa fa-users" aria-hidden="true"></i>My Clients</div></a></li>
    <li><a href="#"><div class="hb_menu_name"><i class="fa fa-clock-o" aria-hidden="true"></i>Pending Applications</div></a></li>
    <li>
        <a href="#"><div class="hb_menu_name"><i class="fa fa-envelope" aria-hidden="true"></i>Messages<i class="fa fa-angle-down" aria-hidden="true"></i></div></a>
        <ul class="submenu">
            <li>
                <a href="#"><div class="hb_menu_name">My Job Listings<i class="fa fa-angle-down" aria-hidden="true"></i></div></a>
                <ul class="submenu_1">
                    <li><a href="#"><div class="hb_menu_name">Web Developer</div></a></li>
                    <li><a href="#"><div class="hb_menu_name">Content Writer</div></a></li>
                </ul>
            </li>
            <li><a href="#"><div class="hb_menu_name">Inbox</div></a></li>
            <li><a href="#"><div class="hb_menu_name">Sent Items</div></a></li>
        </ul>
    </li>
    <li><a href="#"><div class="hb_menu_name"><i class="fa fa-university" aria-hidden="true"></i>Headquarters</div></a></li>
</ul>

脚本

jQuery(document).ready(function($){
    $("#hb_sidebarmenu li ul").hide();
    $("#hb_sidebarmenu li").click(function(){
        $(this).find('.submenu').toggle();
    });
});

Answer 1

通过将您的 jQuery 函数从 find() 更改为 children()，它将仅针对直接子级，因此仅打开您单击的 li 正下方的子菜单。

您的 jQuery 将如下所示：

jQuery(document).ready(function($){
    $("#hb_sidebarmenu li ul").hide();
    $("#hb_sidebarmenu li").click(function(){
        $(this).children('.submenu').toggle();
    });
});

查看您的代码，我还建议您将目标元素更改为 a 标记。

如果你想实现这一点，你可以调整你的 jQuery 以使用 next() 函数，如下所示：

jQuery(document).ready(function($){
    $("#hb_sidebarmenu li ul").hide();
    $("#hb_sidebarmenu li a").click(function(e){
        if ($(this).next().is('ul')) {
            e.preventDefault();
            $(this).next().toggle();
        }
    });
});