纯JS的Contex菜单

Question

我在编程上是个乞丐。我的目标是在纯JavaScript上编写contex菜单。理想情况下，它必须是这样的：https://jqueryui.com/menu/，我已经有了来自JSON的HTML无序列表。我如何定制它？当HTML正在构建时，我有添加样式吗?还是有其他解决问题的方法。我只能使用纯JS，不能使用框架。我的密码在下面。

function buildList(data, isSub){
    var html = (isSub)?'<div>':''; // Wrap with div if true
    html += '<ul>';
    for(item in data){
        html += '<li>';
        if(typeof(data[item].sub) === 'object'){ // An array will return 'object'
            if(isSub){
                html += '<a href="' + data[item].link + '">' + data[item].name + '</a>';
            } else {
                html += data[item].id; // Submenu found, but top level list item.
            }
            html += buildList(data[item].sub, true); // Submenu found. Calling recursively same method (and wrapping it in a div)
        } else {
            html += data[item].id // No submenu
        }
        html += '</li>';
    }
    html += '</ul>';
    html += (isSub)?'</div>':'';
    console.log(html);
    return html;
}
var hide =  document.getElementsByClassName('seeMenu')[0];
hide.addEventListener('click',function () {
    var menu = document.getElementsByClassName('menu')[0];
    var hide =  document.getElementsByClassName('seeMenu')[0];
    menu.style.display = "inline-block";
    hide.style.display = "none";
});
(function(){
    // Json config for menu
    var JSON = {
    menu: [
        {id: 'First',sub: [
            {name: 'lorem ipsum 0-0',link: '0-0', sub: null},
            {name: 'lorem ipsum 0-1',link: '0-1', sub: null},
            {name: 'lorem ipsum 0-2',link: '0-2', sub: null}
            ]
        },
        {id: 'Second',sub: null},
        {id: 'Third',sub: [
            {name: 'lorem ipsum 2-0',link: '2-0', sub: null},
            {name: 'lorem ipsum 2-1',link: '2-1', sub: null},
            {name: 'lorem ipsum 2-2',link: '2-2', sub: [
                {name: 'lorem ipsum 2-2-0',link: '2-2-0', sub: null},
                {name: 'lorem ipsum 2-2-1',link: '2-2-1', sub: null},
                {name: 'lorem ipsum 2-2-2',link: '2-2-2', sub: null},
                {name: 'lorem ipsum 2-2-3',link: '2-2-3', sub: null},
                {name: 'lorem ipsum 2-2-4',link: '2-2-4', sub: null},
                {name: 'lorem ipsum 2-2-5',link: '2-2-5', sub: null},
                {name: 'lorem ipsum 2-2-6',link: '2-2-6', sub: null}
            ]},
            {name: 'lorem ipsum 2-3',link: '2-3', sub: null},
            {name: 'lorem ipsum 2-4',link: '2-4', sub: null},
            {name: 'lorem ipsum 2-5',link: '2-5', sub: null}
            ]
        },
        {id: 'Fourth',sub: null},
         {id: 'Five',sub: [
            {name: 'lorem ipsum 0-5',link: '0-5', sub: null},
            {name: 'lorem ipsum 0-6',link: '0-6', sub: null},
            {name: 'lorem ipsum 0-7',link: '0-7', sub: null}
            ]
        }
    ]
}    
    document.write(buildList(JSON.menu,false));
})()

Answer 1

听起来像是在寻找一个完整的自定义解决方案。我不会给你这个，但我有几个建议：

1. 解决方案1是不分3个步骤(硬编码JSON，然后从其中生成HTML，然后附加jquery菜单行为)。相反，硬代码完成HTML，就像jquery菜单所期望的那样。在您指向的网页(jquery菜单文档)上，有“查看源”链接，它将为您提供一个示例HTML片段。然后，如果在用户单击某个菜单后不需要显示该菜单，则可以使用 function显示/隐藏该菜单。
2. 解决方案2:保留您的方法(3步过程)，并使用调试方法(例如window.console.log)监视您的自定义进度(您根本没有指定:自定义什么？怎么做？)。

啊，去他的，有个解决办法：

将这一行中的任何一行：var html = (isSub)?'<div>':'';替换为var html = (isSub)?'<div class="menu">':'';

或将该行html += '<ul>';替换为html += '<ul class="class">';

看看什么效果更好。看来您的seeMenu单击代码正在寻找具有类“菜单”的元素，而您的buildList并没有为此做“准备”。请注意，我没有检查buildList是否实际生成有效的HTML (参见上面的解决方案#1 )。