Advertisement
Igor150195

костыль меню

Apr 15th, 2024 (edited)
526
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.     document.addEventListener('DOMContentLoaded', function() {
  3.         document.querySelectorAll('.popup-menu-sublevels .popup-sublevels-item').forEach(function(element) {
  4.             let category = element.dataset.category;
  5.             let subcategory = element.dataset.subcategory;
  6.    
  7.             if (category !== "" && subcategory !== "") {
  8.                 document.querySelectorAll('.nav-menu-item-wrap').forEach(function(menuItem) {
  9.                     let currentCategory = menuItem.dataset.category;
  10.                     let sublevelsHiddenContainer = menuItem.querySelector('.menu-sublevels-hidden');
  11.    
  12.                     if (category === currentCategory) {
  13.                         sublevelsHiddenContainer.appendChild(element.cloneNode(true));
  14.                     }
  15.                 });
  16.             }
  17.         });
  18.    
  19.         document.querySelectorAll('.nav-menu-item-wrap').forEach(function(menuItem) {
  20.             let subcategoryNames = [];
  21.             let sublevelsWrap = menuItem.querySelector('.menu-sublevels-wrap');
  22.             let sublevels = menuItem.querySelectorAll('.popup-sublevels-item');
  23.    
  24.             sublevels.forEach(function(sublevel) {
  25.                 subcategoryNames.push(sublevel.dataset.subcategory);
  26.             });
  27.    
  28.             let uniqueArr = Array.from(new Set(subcategoryNames));
  29.    
  30.             uniqueArr.forEach(function(subcategoryName) {
  31.                 sublevelsWrap.innerHTML += `
  32.                     <div class="menu-sublevels-box">
  33.                         <div class="menu-sublevels-box-title subtitle-2">${subcategoryName}</div>
  34.                         <div class="menu-sublevels-box-body"></div>
  35.                     </div>
  36.                 `;
  37.             });
  38.         });
  39.    
  40.         document.querySelectorAll('.nav-menu-item-wrap').forEach(function(menuItem) {
  41.             let boxes = menuItem.querySelectorAll('.menu-sublevels-box');
  42.             let sublevels = menuItem.querySelectorAll('.menu-sublevels-hidden .popup-sublevels-item');
  43.    
  44.             boxes.forEach(function(box) {
  45.                 let boxBody = box.querySelector('.menu-sublevels-box-body');
  46.                 let boxSubcategory = box.querySelector('.menu-sublevels-box-title').textContent;
  47.    
  48.                 sublevels.forEach(function(sublevel) {
  49.                     let subcategory = sublevel.dataset.subcategory;
  50.    
  51.                     if (subcategory === boxSubcategory) {
  52.                         boxBody.appendChild(sublevel.cloneNode(true));
  53.                     }
  54.                 });
  55.             });
  56.         });
  57.     });
  58. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement