Question

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

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

每次categorys数组的索引等于一个数组时，必须有一个下拉菜单，其中包含该数组的内容，并且菜单可能无穷无尽。如果数组的索引不等于数组，则应该只是一个标签。

我正在努力实现以下目标：

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

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

这是使用您的代码和一些简单CSS的一种简单提琴（您应该单击而不是将其悬停）：https://jsfiddle.net/zyuhqo3k/1/

.children

<li>

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);

Answer 2

基于提供的代码的自适应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/

使用多维数组制作下拉菜单

2 个答案: