JQuery SmartMenu, SelectMenu onclick toggle json data

问题

I have successfully rendered vertical menu items using this link Jquery Smartmenu Render I have challenge of toggling dynamic menu with json data i.e on click of divs tree-anchor-associate and tree-anchor-talent as below.

        <div class="col-lg-3 col-6 d-flex d-flex-md-none tree-anchor-associate">
            <div class="card mb-4 box-shadow">
                <div class="card-body text-center">
                    <p class="card-text text-primary">Associate</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-6 d-flex d-flex-md-none tree-anchor-talent">
            <div class="card mb-4 box-shadow">
                <div class="card-body text-center">
                    <p class="card-text text-primary">Talent Fulfilment</p>
                </div>
            </div>
        </div>

Dynamic verticle menu div

<div class="row">
    <div class="col-md-3 col-12 pt-5 tree-table">
        <ul id="main-menu"></ul>
    </div>
</div>

I am able to display data for both json object. in test.json menu0 as computers and second menu1 as mobile tablets in getJSON method.

first JSON array

        $.getJSON('./js/test.json', function(data){     
           var obj=data;
           var json = JSON.stringify(obj);
           var s = JSON.parse(json);
           for( var i=0; i < s.menu0.length; i++)
            {
                $("#main-menu").append(' <li id="menu-list-' + i + '"><a href="#">' + s.menu0[i].name + '</a></li>');

                var list_length = s.menu0[i].children.length;
                if (list_length > 0)
                    $("#main-menu li#menu-list-" + i).append('<ul></ul>');

                for( var j=0; j < list_length; j++)
                {
                    $("#main-menu li#menu-list-" + i + " ul").append(' <li id="menu-list-' + i + '-children-list-' + j + '"><a href="#">'+  s.menu0[i].children[j].name + '</a></li>');

                    var children_list_length = s.menu0[i].children[j].children.length;
                    if(children_list_length > 0)
                        $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j).append("<ul></ul>");
                    for( var n=0; n < children_list_length; n++)
                    {
                        $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j + " ul").append(' <li><a href="#">'+ s.menu0[i].children[j].children[n].name +'</a></li>');
                    }
                }
            }

           $('#main-menu').smartmenus({
            subMenusSubOffsetX:1,
            subMenusSubOffsetY: -8                  
           });

});

second JSON array

  $.getJSON('./js/test.json', function(data){     
       var obj=data;
       var json = JSON.stringify(obj);
       var s = JSON.parse(json);
       for( var i=0; i < s.menu1.length; i++)
        {
            $("#main-menu").append(' <li id="menu-list-' + i + '"><a href="#">' + s.menu1[i].name + '</a></li>');

            var list_length = s.menu1[i].children.length;
            if (list_length > 0)
                $("#main-menu li#menu-list-" + i).append('<ul></ul>');

            for( var j=0; j < list_length; j++)
            {
                $("#main-menu li#menu-list-" + i + " ul").append(' <li id="menu-list-' + i + '-children-list-' + j + '"><a href="#">'+  s.menu1[i].children[j].name + '</a></li>');

                var children_list_length = s.menu1[i].children[j].children.length;
                if(children_list_length > 0)
                    $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j).append("<ul></ul>");
                for( var n=0; n < children_list_length; n++)
                {
                    $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j + " ul").append(' <li><a href="#">'+ s.menu1[i].children[j].children[n].name +'</a></li>');
                }
            }
        }

       $('#main-menu').smartmenus({
        subMenusSubOffsetX:1,
        subMenusSubOffsetY: -8                  
       });
      });

the real issue is at toggling function as of now it toggles vertical menu div only for menu0 json and the function is as below.

    var $menu;
    function showMenu(someitem){
        $(".tree-table").toggleClass("displayBlock");
        $menu = $('#main-menu').renderizeMenu(someitem, {rootClass: "sm sm-blue sm-vertical"});
        $menu.smartmenus();
    }
    
    $(".tree-anchor-associate").on('click',(function(){
        $(this).toggleClass("fade-box");
        showMenu();
        
    })
    );
$(".tree-anchor-talent").on('click',(function(){
        $(this).toggleClass("fade-box");
        showMenu();
    })
    );  

I have attempted to call getJSON methods under on above click function but they do not work and does not give any error.

What could be the way to pass json array menu0 and menu1 on click of div with respectively? test.json

{
    "menu0" :[
        { 
    "name": "Computers",
     "children": [{
      "name": "Notebook",
      "children": [{
       "name": "Apple"
      }, {
       "name": "Windows"
      }]
     }, {
      "name": "Tablets",
      "children": [{
       "name": "Apple"
      }, {
       "name": "Android"
      }, {
       "name": "Windows"
      }]
     }]
    }, {
     "name": "Phones",
     "children": [{
      "name": "Android",
      "children": [{
       "name": "Samsung"
      }, {
       "name": "Nokia"
      }, {
       "name": "Lenovo"
      }]
     }, {
      "name": "Windows Phones",
      "children": [{
       "name": "Microsoft"
      }, {
       "name": "Nokia"
      }]
     }]
    }, {
     "name": "Cameras",
     "children": [{
      "name": "Digital",
      "children": [{
       "name": "Nikon"
      }, {
       "name": "Fuji"
      }]
     }, {
      "name": "DSLR",
      "children": [{
       "name": "Canon"
      }, {
       "name": "Nikon"
      }]
     }]
    }],
    "menu1" :[
        { 
    "name": "Moblies",
     "children": [{
      "name": "samsumg",
      "children": [{
       "name": "Apple"
      }, {
       "name": "Windows"
      }]
     }, {
      "name": "Ipads",
      "children": [{
       "name": "Apple"
      }, {
       "name": "Android"
      }, {
       "name": "Windows"
      }]
     }]
    }, {
     "name": "Phones",
     "children": [{
      "name": "Android",
      "children": [{
       "name": "Samsung"
      }, {
       "name": "Nokia"
      }, {
       "name": "Lenovo"
      }]
     }, {
      "name": "Windows Phones",
      "children": [{
       "name": "Microsoft"
      }, {
       "name": "Nokia"
      }]
     }]
    }, {
     "name": "Cameras",
     "children": [{
      "name": "Digital",
      "children": [{
       "name": "Nikon"
      }, {
       "name": "Fuji"
      }]
     }, {
      "name": "DSLR",
      "children": [{
       "name": "Canon"
      }, {
       "name": "Nikon"
      }]
     }]
    }]
    }
    

Plugin used

<!-- SmartMenus jQuery plugin -->
<script src="lib/jquery.smartmenus.min.js" type="text/javascript"></script>
<script src="lib/renderMenu.js"></script>

来源：https://stackoverflow.com/questions/64243699/jquery-smartmenu-selectmenu-onclick-toggle-json-data