https://sgs.must.edu.mo/sgsMust/js/menu-list.js

1; ((doc) => {
2  const { down, up } = SlideElement;
3  const treeNode = doc.querySelector('#menu-mobile-list')
4  const arr = ['first', 'second', 'thrid'];
5
6  function getBrotherNode(node) {
7    const brotherList = []
8    const allChilds = node.parentNode.children
9    for (let i of allChilds) {
10      if (i.nodeType == 1 && i != node) {
11        brotherList.push(i)
12      }
13    }
14    return brotherList
15  }
16
17  function hasChildrenSelected(parentNode) {
18    if (parentNode) {
19      var selected = false;
20      const children = parentNode.children;
21      for (var i = 0; i < children.length; i++) {
22        const item = children.item(i);
23        if (item.classList.contains('menu-choosed')) {
24          selected = true;
25          break;
26        } else {
27          selected = hasChildrenSelected(item);
28        }
29      }
30      return selected;
31    }
32  }
33
34  function initList(nodeList, level = 0) {
35    const lis = nodeList.querySelectorAll(':scope > li');
36    lis.forEach((li) => {
37      let num = level;
38      const p = li.querySelector('p');
39      const ul = li.querySelector('ul');
40      const nextList = li.querySelector('#menu-mobile-list');
41      p.classList.add(arr[level]);
42      let icon = doc.createElement('i');
43      const childrenSelected = hasChildrenSelected(nextList);
44      // if (ul) {
45      //   icon.classList.add('iconfont', 'icon-zhankai', 'menu-arrow-icon');
46      //   p.appendChild(icon);
47      // }
48
49      if (childrenSelected && !li.classList.contains('menu-choosed')) {
50        li.classList.add('menu-choosed')
51      }
52      if (nextList) {
53        if (li.classList.contains('menu-choosed')) {
54          // icon.style.transform = 'rotate(' + -180 + 'deg)';
55        }
56        num++;
57        initList(nextList, num)
58      }
59    })
60  }
61
62  function closeList(li) {
63    const nextList = li.querySelector('#menu-mobile-list');
64    const p = li.querySelector('p');
65    if (p.classList.contains('border-bt-line-none')) {
66      p.classList.remove('border-bt-line-none');
67    }
68    const icon = p.querySelector('i');
69    if (li.classList.contains('menu-choosed') && (p.classList.contains('first') || p.classList.contains('second'))) {
70      if (icon) {
71        icon.style.transform = 'rotate(' + 0 + 'deg)';
72
73      }
74    }
75    li.classList.remove('menu-choosed');
76    if (nextList) {
77      up(nextList);
78      const nextLi = nextList.querySelectorAll(':scope>li')
79      nextLi.forEach(nLi => {
80        closeList(nLi);
81      })
82    }
83  }
84
85  function openList(li) {
86    const nextList = li.querySelector('#menu-mobile-list');
87    li.classList.add('menu-choosed');
88    const p = li.querySelector('p');
89    p.classList.add('border-bt-line-none');
90    if (p.classList.contains('first') || p.classList.contains('second')) {
91      const icon = li.querySelector('p i');
92      if (icon) {
93        icon.style.transform = 'rotate(' + -180 + 'deg)';
94
95      }
96    }
97
98    if (nextList) {
99      down(nextList);
100    }
101  }
102
103  function nodeListAddEvenetListener(treeNode) {
104    const lis = treeNode.querySelectorAll('li');
105
106    // 移动端三级子菜单 task#4957 新加
107    const level2_li = treeNode.querySelectorAll('.menu-to-level2')
108    const menu_level3 = treeNode.querySelectorAll('.li-clear-icon')
109    menu_level3.forEach((item) => {
110      // 获取 三级菜单 i标签
111      const level3_i = item.children[0].children[1];
112      const level3_li = item.querySelectorAll('li')
113      if (level3_i && level3_i.classList.contains('icon-zhankai')) {
114        level3_i.classList.remove('icon-zhankai')
115        level3_i.classList.add('icon-zhankai1')
116      }
117      // if (level3_li.length == 0) {
118      //   item.querySelector('i').remove();
119      // }
120      item.addEventListener('click', () => {
121        const brotherList = getBrotherNode(item);
122        if (level3_i && level3_i.classList.contains('icon-zhankai1')) {
123          level3_i.classList.remove('icon-zhankai1')
124          level3_i.classList.add('icon-shouqi1')
125          brotherList.forEach((other) => {
126            const other_i = other.children[0].children[1];
127            if (other_i) {
128              other_i.classList.add('icon-zhankai1')
129              other_i.classList.remove('icon-shouqi1')
130            }
131          })
132        } else {
133          level3_i.classList.add('icon-zhankai1')
134          level3_i.classList.remove('icon-shouqi1')
135        }
136      })
137
138    })
139    // 点击其他二级菜单时，恢复三级菜单至初始状态

140    level2_li.forEach((li2) => {
141      li2.addEventListener('click', () => {
142        menu_level3.forEach((item) => {
143          const li3 = item.children[0].children[1];
144          if (li3 && li3.classList.contains('icon-shouqi1')) {
145            li3.classList.remove('icon-shouqi1')
146            li3.classList.add('icon-zhankai1')
147          }
148        })
149      })
150    })
151
152    lis.forEach(li => {
153      const link_a = li.querySelector('a');
154      link_a.addEventListener('click', function (e) {
155        e.stopPropagation();
156      })
157      li.addEventListener('click', function (e) {
158
159        e.stopPropagation();
160
161        const brotherList = getBrotherNode(li);
162        for (let li of brotherList) {
163          closeList(li);
164        }
165
166        if (li.classList.contains('menu-choosed')) {
167          closeList(li);
168        } else {
169          openList(li);
170        }
171      }, false)
172    })
173  }
174
175  function openChoosedList(nodeList) {
176    const allLi = nodeList.querySelectorAll(':scope>li');
177    allLi.forEach(li => {
178      const nextList = li.querySelector('#menu-mobile-list');
179      if (li.classList.contains('menu-choosed') && nextList) {
180        down(nextList);
181        openChoosedList(nextList);
182      }
183    });
184  }
185
186  function init() {
187    initList(treeNode);
188
189    openChoosedList(treeNode);
190
191    nodeListAddEvenetListener(treeNode);
192  };
193
194  init();
195
196})(document);