jQueryのドロップダウンメニュー

Question

に、私は私のウェブサイトのモバイルメニューのためにこのようなスクリプトを使用しています：それは正常に動作し、任意のサブメニューをクリックすると、サブメニュー1.
を示して最初のレベル（ルート）で

<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のリンクでは、サブメニュー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)); 
      } 
     } 
    }); 
});