用多维数组制作下拉菜单

Question

我有一个像这样的多维对象数组。

var categories = [{ 
    text: "engine",
    children: [1,2,3, { 
        text: "piston",
        children: [4,5,6]
    }]   
}, {
    text: "tire",
    children: [7,8,9]
}];

每当类别数组的索引等于一个数组时，都必须有一个下拉菜单，其中包含数组的内容，并且可以无穷无尽。如果数组的索引不等于数组，它应该只是一个 a 标签。

我正在尝试实现这样的目标：

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

我已尝试更改下面的代码以使其适合我的需要，我结合了 html 和 css 中的自制下拉菜单来执行此操作，但此时它不再有意义。

function menuToElement(menu) {
    const ul = document.createElement("ul");
    for (const item of menu) {
        const li = document.createElement("li");
        if (Object(item) === item) {
            li.textContent = item.text;
            li.appendChild(menuToElement(item.children));
        } else {
            li.textContent = item;
        }
        ul.appendChild(li);
    }
    return ul;
}
const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);

我得到的结果是我只能显示名称引擎和轮胎，但无法让其中的孩子们工作的下拉菜单。我想问的是是否有人可以解释上面的代码究竟做了什么，以及我是否以正确的方式处理这个问题。

这就是我尝试使下拉菜单不再完全正常工作的方式，因为我试图使用其他代码使其附加。

<div class="popup" onclick="togglePopup2()">
<div class="sel popuptext" id="myPopup2">
      <div class='txt'>Select</div>    
      <div id="Select" class="options hide">
           <div>Option 1</div>
           <div>Option 2</div>
           <div>Option 3</div>
      </div>           
    </div>
  <img src="~/images/circle.png" class="category" id="1">
</div>


var txt = $('.txt'),
    options = $('.options');

txt.click(function (e) {

    e.stopPropagation();
    var content = $(e.target).text();
    console.log(content);
    $('#'+ content).show(); 
});


$('body').click(function (e) {
    options.hide();
});
}

Answer 1

根据提供的代码改编的 Answer JS/jQuery

HTML

<div id='myMenu' class="dropdown">

</div>

CSS

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

jQuery

var categories = [{
  text: "engine",
  children: [1, 2, 3, {
    text: "piston",
    children: [4, 5, 6]
  }]
}, {
  text: "tire",
  children: [7, 8, 9]
}];

function menuToElement(menu) {
  const ul = document.createElement("ul");
  ul.className = 'dropdown-menu';
  for (const item of menu) {
    const li = document.createElement("li");
      if (Object(item) === item) {
        li.textContent = item.text;
        li.appendChild(menuToElement(item.children));
        li.className = "dropdown-submenu";
      } else {
        li.textContent = item;
      }
      ul.className = 'dropdown-menu';
      ul.appendChild(li);
    }
    return ul;
}

  $(document).ready(function() {

  var menu = menuToElement(categories);
  document.getElementById('myMenu').innerHTML = "<button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown'>Categories<span class='caret'></span></button>";
  document.getElementById('myMenu').appendChild(menu);

  liList = document.getElementsByTagName('li');
  for (var i = 0; i < liList.length; i++) {
    items = liList[i].childNodes;
    if (items.length > 1)
    {
            liList[i].innerHTML = "<a class='test' tabindex='-1' href='#'>" + items[0].textContent+ "<span class='caret'></span></a>" + "<ul class='dropdown-menu'>" + items[1].innerHTML + "</ul>";
    }
    else if (items.length == 1){
            liList[i].innerHTML = "<a class='test' tabindex='-1' href='#'>" + items[0].textContent + "</a>";    
        }
  }

    $('#myMenu a').on("click", function(e) {
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  });

工作 JS 小提琴 https://jsfiddle.net/2h8adqut/10/

Answer 2

您的代码似乎工作正常。 首先它会创建一个无序列表 (<ul>)。然后遍历输入参数的所有元素，并为每个项目创建一个列表项元素 (<li>)。如果一个元素是一个对象，则将其文本设置为该项的.text 属性，并以该项的子项 (.children) 作为参数递归调用相同的函数，并将结果附加到先前创建的<li> 元素。否则它只会渲染列表项元素，其文本与项相同。

这是一个使用您的代码和一些简单 css 的简单小提琴（您应该通过单击而不是悬停来完成）：https://jsfiddle.net/zyuhqo3k/1/

function menuToElement(menu) {
    const ul = document.createElement("ul");
    for (const item of menu) {
        const li = document.createElement("li");
        if (Object(item) === item) {
            li.textContent = item.text + ' \u25BD';
            li.appendChild(menuToElement(item.children));
        } else {
            li.textContent = item;
        }
        ul.appendChild(li);
    }
    return ul;
}

var categories = [{ 
    text: "engine",
    children: [1,2,3, { 
        text: "piston",
        children: [4,5,6]
    }]   
}, {
    text: "tire",
    children: [7,8,9]
}];
const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);

li > ul {
  display: none;
}

li:hover > ul {
  display: block;
}

<div id="menu">
</div>