如何修复子菜单的此 jquery 脚本

How can i fix this jquery script for submenu?

本文关键字：jquery 脚本 菜单 何修复      更新时间：2023-09-26

这是代码，这是结果：您可以通过单击内部来查看测试菜单。

$(document).ready(function () {
    var $links = $('#menu-menu-1 .menu-item a').click(function () {

        var submenu = $(this).next();
        $subs.not(submenu).hide()
        submenu.toggle(500);
        $("#menu-2").slideToggle(300);
    });
    var $subs = $links.next(); });

问题是，如果我单击菜单，它就会出现子菜单，但是如果我不关闭已打开的子菜单并且打开菜单中的另一个声音，则无法正常工作。

如果我在 #menu-2 打开时单击另一个.menu-item a会发生什么？脚本关闭并正确打开另一个子菜单，但我的#menu-2关闭仅关闭。然后如果我关闭.menu-item a这样... #menu-2打开。我该怎么做才能解决？

尝试

$(document).ready(function () {
    var $menu2 = $("#menu-2");
    var $links = $('#menu-menu-1 .menu-item a').click(function () {
        var submenu = $(this).next();
        $subs.not(submenu).hide();
        var isVisible = submenu.stop(true, true).is(':visible');
        $menu2.stop(true, true);
        if (isVisible) {
            submenu.hide(500);
            $menu2.slideUp(300);
        } else {
            $menu2.slideUp(300, function () {
                $menu2.slideDown(300);
                submenu.show(500);
            });
        }
    });
    var $subs = $links.next();
});

我认为您可以简化您尝试按照以下方法执行的操作（未经测试）：

$(function () { 
    var menuItems = $('#menu-menu-1 > li');
    var submenus = $('ul', menuItems)
    menuItems.click(function () {
        submenus.slideUp(); // Hide all menus to their default hidden state
        var submenu = $('ul', $(this)); // Show the child menu for the clicked menu
        submenu.toggle(500);
    });
});
相关文章：