Question

UL的第一个嵌套看起来工作正常，但是当我点击UL的第二个嵌套时，遇到的问题是它关闭了第一个嵌套。我想要显示UL的第二个嵌套。确切地说，我想显示我的职位列表的子元素。

<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();
        }
    });
});

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

1 个答案: