Javascript 使用Vanilla JS中的数据属性添加/删除类

正如本文的标题所示，我正在尝试使用vanilla javascript中的数据属性向div添加类。然而，我不确定我是否会以最有效的方式进行

下面我添加了一些基本的HTML和javascript。如果有人能帮我填空，我将不胜感激

var选择器_mastmenu=document.getElementById（“菜单”）；
选择器菜单。addEventListener（'click'，函数（事件）{
if（event.target.classList.contains（“has child”））{
//从所有“菜单”面板“div”中删除类“show”。
//查找具有匹配“数据菜单id”的“菜单面板”，并添加类“显示”。
}
if（event.target.classList.contains（“panel\u back”））{
//从所有“菜单”面板“div”中删除类“show”。
//查找“菜单”面板“添加类”“显示”到“菜单id”的“父菜单id”。
}
});
#菜单。菜单面板{
显示：无；
}
#menu.menu\u panel.show{
显示：块；
}

返回主菜单








这正是
文档的类型。querySelectorAll
就是为此而构建的。它接受CSS类型选择器并返回节点列表中的每个匹配元素，这是一个类似数组的对象，您可以对其进行迭代。
例如，如果您正在使用类
菜单\面板
查找每个对象，您可能需要

document.querySelectorAll('.menu__panel') // note the . before the class, just like CSS
   .forEach(panel => {
      panel.classList.add('plain-string-class-name'); // Adds plain-string-class-name to your class='' attribute in your HTML element
      panel.classList.remove('plain-string-class-name'); // Removes plain-string-class-name from your class='' attribute in your HTML element. Does not error if plain-string-class-name does not exist.
});

这正是
document.querySelectorAll
的构建目的。它接受CSS类型选择器并返回节点列表中的每个匹配元素，这是一个类似数组的对象，您可以对其进行迭代。
例如，如果您正在使用类
菜单\面板
查找每个对象，您可能需要

document.querySelectorAll('.menu__panel') // note the . before the class, just like CSS
   .forEach(panel => {
      panel.classList.add('plain-string-class-name'); // Adds plain-string-class-name to your class='' attribute in your HTML element
      panel.classList.remove('plain-string-class-name'); // Removes plain-string-class-name from your class='' attribute in your HTML element. Does not error if plain-string-class-name does not exist.
});

当前使用事件处理程序函数的方式会有问题。如何使用css设置样式以及在何处使用单击可能不一致。目标元素可以是
li
标记或
a
标记

下面是一个不更改html的工作示例。但是，如果我打算在myslef中执行此操作，我将更明确地使用您的单击处理程序，这样我就不需要在我的示例中使用类似于
parentNode
的内容遍历dom。如果可以将数据属性放在按钮本身上，为什么要遍历dom


var hasChildElements=document.queryselectoral（'.has child'）；
var menupanelements=document.querySelectorAll（'.menu_u面板'）；
var panelBackElements=document.querySelectorAll（'.panel_u-back'）；
hasChildElements.forEach（el=>{
el.addEventListener（“单击”，显示菜单）
})
panelBackElements.forEach（el=>{
el.addEventListener（'click'，hideMenu）
})
功能显示菜单（事件）{
var menuId=event.currentTarget.getAttribute（'data-menu-id'）
var menuPanelEl=document.querySelector（`div[data menu id=“${menuId}]”）
//从所有“菜单”面板“div”中删除类“show”。
menupanelements.forEach（el=>{
el.classList.remove（'show'）
})
//查找具有匹配“数据菜单id”的“菜单面板”，并添加类“显示”。
menuPanelEl.classList.add（'show'）
}
函数hideMenu（事件）{
//从所有“菜单”面板“div”中删除类“show”。
menupanelements.forEach（el=>{
el.classList.remove（'show'）
})
//查找“菜单”面板“添加类”“显示”到“菜单id”的“父菜单id”。
var menuId=document.querySelector（'.panel_uuback'）.parentNode.getAttribute（'data-parent-menu-id'）；
var parentMenu=document.querySelector（`div[data menu id=“${menuId}]”）
parentMenu.classList.add（'show'）
}
#菜单。菜单面板{
显示：无；
}
#menu.menu\u panel.show{
显示：块；
}

返回主菜单








当前使用事件处理程序函数的方式将出现问题。如何使用css设置样式以及在何处使用单击可能不一致。目标元素可以是
li
标记或
a
标记

下面是一个不更改html的工作示例。但是，如果我打算在myslef中执行此操作，我将更明确地使用您的单击处理程序，这样我就不需要在我的示例中使用类似于
parentNode
的内容遍历dom。如果可以将数据属性放在按钮本身上，为什么要遍历dom


var hasChildElements=document.queryselectoral（'.has child'）；
var menupanelements=document.querySelectorAll（'.menu_u面板'）；
var panelBackElements=document.querySelectorAll（'.panel_u-back'）；
hasChildElements.forEach（el=>{
el.addEventListener（“单击”，显示菜单）
})
panelBackElements.forEach（el=>{
el.addEventListener（'click'，hideMenu）
})
功能显示菜单（事件）{
var menuId=event.currentTarget.getAttribute（'data-menu-id'）
var menuPanelEl=document.querySelector（`div[data menu id=“${menuId}]”）
//从所有“菜单”面板“div”中删除类“show”。
menupanelements.forEach（el=>{
el.classList.remove（'show'）
})
//查找具有匹配“数据菜单id”的“菜单面板”，并添加类“显示”。
menuPanelEl.classList.add（'show'）
}
函数hideMenu（事件）{
//从所有“菜单”面板“div”中删除类“show”。
menupanelements.forEach（el=>{
el.classList.remove（'show'）
})
//查找“菜单”面板“添加类”“显示”到“菜单id”的“父菜单id”。
var menuId=document.querySelector（'.panel_uuback'）.parentNode.getAttribute（'data-parent-menu-id'）；
var parentMenu=document.querySelector（`div[data menu id=“${menuId}]”）
parentMenu.classList.add（'show'）
}
#菜单。菜单