Как добавить элемент вложенного меню к родительскому элементу?

Как можно модифицировать данный код для вывода элементов меню с учетом структуры "родитель - дочерний", а не плоского списка элементов, как в настоящее время?
  • 21 февраля 2024 г. 20:58
Ответы на вопрос 1
Для добавления элемента вложенного меню к родительскому элементу, каждый элемент меню должен содержать информацию о своих дочерних элементах. Это можно сделать, добавив к каждому элементу меню массив дочерних элементов.

Пример структуры элемента меню с учетом дочерних элементов:

```json
{
   "name": "Parent Element",
   "children": [
      {
         "name": "Child Element 1"
      },
      {
         "name": "Child Element 2"
      }
   ]
}
```

Чтобы модифицировать код для вывода элементов меню с учетом структуры "родитель - дочерний", можно использовать рекурсивную функцию, которая будет проходить по дереву элементов и выводить их на страницу вложенным списком. 

Пример кода на JavaScript:

```javascript
function renderMenu(menuItems, parent) {
  let ul = document.createElement('ul');
  
  menuItems.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item.name;
    
    if (item.children) {
      renderMenu(item.children, li);
    }
    
    ul.appendChild(li);
  });
  
  if (parent) {
    parent.appendChild(ul);
  } else {
    document.body.appendChild(ul);
  }
}

let menu = [
  {
    "name": "Parent Element 1",
    "children": [
      {
         "name": "Child Element 1.1"
      },
      {
         "name": "Child Element 1.2"
      }
    ]
  },
  {
    "name": "Parent Element 2",
    "children": [
      {
         "name": "Child Element 2.1"
      },
      {
         "name": "Child Element 2.2"
      }
    ]
  }
];

renderMenu(menu);
```

Этот код рекурсивно проходит по каждому элементу меню и выводит его на страницу в виде вложенных списков (UL). Обратите внимание, что в данном примере структура элементов меню задается в виде массива объектов в переменной `menu`.
Похожие вопросы