javascript - 下拉菜单中的 JQuery

Question

我正在为我网站的移动菜单使用这样的脚本:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('ul#menu > li').on('click', function(e) { 
        //console.log("root"); 
        e.preventDefault(); 

        var cat = $(this).attr('id'); 
        if ($(this).hasClass('open')) {
        console.log("remove: " + cat); 
            $(this).removeClass('open');
            $('#menu #sub1').remove(); 
            $('#menu > #'+ cat +' > a > i').removeClass('fa-angle-down');
        } else {
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $(this).addClass('open');
            $('#menu #sub1').remove(); 
            $('#menu > #'+ cat +' > a > i').toggleClass('fa-angle-down');
            $( $("<ul class='submenu' id='sub1'>").load(url + "#myContainer") )
            .insertAfter( $( '#menu #' + cat + ' a') );
        }
clicked == 'sub';            
    });

//console.log("clicked: " + clicked); 
    $("#menu").on("click", "#sub2 li a", function(e) { 
        e.preventDefault(); 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub3').remove(); 
                $('#menu #sub2 > #'+ cat +' > a > i').removeClass('fa-angle-down');
            } else {
                var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

                $(this).addClass('open');
                $('#menu #sub3').remove(); 
                $('#menu #sub2 > #'+ cat +' > a > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub3'>").load(url + "#myContainer") )
                .insertAfter( $( '#menu #' + cat + ' a') );
            }
        }
    }); 

    var section = "<?php echo $section; ?>"; 
console.log("section: " + section); 
    var clicked = 'root';

    $("ul#menu > li").on("click", "#sub1 li", function(e) { 
        e.preventDefault(); 

        clicked = 'sub';
        var cat = $(this).attr('id'); 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub2').remove(); 
                $('#menu #sub1 > #'+ cat +' > a > i').removeClass('fa-angle-down');
            } else {
                var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

                $(this).addClass('open');
console.log("sub: " + cat); 
                $('#menu #sub2').remove(); 
                $('#menu #sub1 > #'+ cat +' > a > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub2'>").load(url + "#myContainer") )
                .insertAfter( $( '#menu #sub1 #' + cat + ' a') );
            }
        }
    });
console.log("clicked: " + clicked); 
});
</script> 

在第一级(根)它工作正常并显示子菜单 1。
通过单击任何子菜单 1 链接，它不会显示子菜单 2，而是会关闭子菜单 1。我尝试了不同的方法，但不幸的是结果相同。

Answer 1

已解决

我通过脚本中的一些修复解决了以下问题:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var section = "<?php echo $section; ?>"; 
    console.log("section: " + section); 

    $('ul#menu > li').on('click', function(e) { 
        e.preventDefault(); 
        var cat = $(this).attr('id'); 
        var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

        $('#menu #sub1').remove(); 
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $('#menu > #'+ cat +' > a > i').removeClass('fa-angle-down');
        } else {
            $(this).addClass('open');
            $('#menu > #'+ cat +' > i').toggleClass('fa-angle-down');
            $( $("<ul class='submenu' id='sub1'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) );
        }
    });

    $("#menu").on("click", "#sub1 li", function(e) { 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            e.preventDefault(); 
            var cat = $(this).attr('id');
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $('#menu #sub2').remove(); 
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub1 > #'+ cat +' > i').removeClass('fa-angle-down');
            } else {
                $(this).addClass('open');
                $('#menu #sub1 > #'+ cat +' > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub2'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) ); 
            }
        }
    });

    $("#menu").on("click", "#sub2 li", function(e) { 
        var _leaf = $(this).attr('class'); 
        if (_leaf == 'leaf') {

        } else {
            e.preventDefault(); 
            var cat = $(this).attr('id');
            var url = 'index.php?route=test/categoryx/child&section=' + section + '&category_id=' + cat; 

            $('#menu #sub3').remove(); 
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $('#menu #sub2 > #'+ cat +' > i').removeClass('fa-angle-down');
            } else {
                $(this).addClass('open');
                $('#menu #sub2 > #'+ cat +' > i').toggleClass('fa-angle-down');
                $( $("<ul class='submenu' id='sub3'>").load(url + "#myContainer") ).insertAfter( $( '#menu #' + cat) ); 
            }
        }
    }); 
});