Question

我很喜欢编程。我的目标是在纯JavaScript上编写上下文菜单。理想情况下，它必须是这样的：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不会在3个步骤中执行此操作（硬编码JSON，然后生成HTML，然后附加jquery-ui菜单行为）。相反，硬编码完整的HTML，就像jquery-ui-menu预期的那样。在您指向的网页（jquery-ui菜单文档）上，有“查看源代码”链接，它将为您提供一个完整的示例HTML片段。然后，如果您在用户点击某些内容后无需显示此菜单，则可以使用jQuery toggle function来显示/隐藏该菜单。
解决方案＃2：保持您的方法（3个步骤）并使用调试方法（例如window.console.log）来监控自定义进度（您还没有）指定：自定义什么？如何？）。

啊，搞砸了，这是解决方案：

替换此行： var html = (isSub)?'<div>':''; 同 var html = (isSub)?'<div class="menu">':'';

或替换此行 html += '<ul>'; 同 html += '<ul class="class">';

看看什么效果更好。看来你的seeMenu-click代码正在寻找带有“menu”类的元素，而你的buildList并没有“准备”。请注意，我还没有检查buildList是否实际生成了有效的HTML（请参阅上面的解决方案＃1）。

带有纯JS的Contex菜单

1 个答案: