Javascript VueJS中的下拉菜单（切换活动菜单）

这是菜单，在我的导航菜单和方法下面，点击时应该打开导航项目中的子项目，但我似乎找不到我缺少的地方

[！[下拉菜单][1][1]

newvue({
el:“#应用程序”，
数据：{
//菜单
“菜单标题”：“a”，
“儿童路线”：[{
“路径”：“/a1”，
“菜单标题”：“a1”
},
{
“路径”：“/a2”，
“菜单标题”：“a2”
}
]
},
{
“菜单标题”：“b”，
“儿童路线”：[{
“路径”：“/b1”，
“菜单标题”：“b1”
},
{
“路径”：“/b2”，
“菜单标题”：“b2”
},
{
“路径”：“/b1”，
“菜单标题”：“b3”
}
]
},
{
“菜单标题”：“c”，
“儿童路线”：[{
“路径”：“/c1”，
“菜单标题”：“c1”
},
{
“路径”：“/c2”，
“菜单标题”：“c2”
},
{
“路径”：“/c3”，
“菜单标题”：“c3”
}
]
}
},
方法：{
导航链接（）{
var navItemParent=document.querySelector（“资产净值项目”）；
var navLink=document.querySelector（“.idb nav.nav item.nav link”）；
var navItem=document.querySelector（“.idb nav.nav item”）；
navItem.classList.toggle（“活动”）；
如果（导航项包含（“活动”））{
navItem.classList.remove（“活动”）；
navLink.classList.toggle（“活动”）；
}
}
)

{{menu.menu_title}}

类切换应作为

数据的一部分进行管理。试试这个，看看它是否适合您：

HTML








routes.json
为了提高可读性和可维护性，最好将列表移动到单独的文件中

[
   {
      "menu_title": "a",
      "child_routes": [
         {
            "path": "/a1",
            "menu_title": "a1"
         },
         {
            "path": "/a2",
            "menu_title": "a2"
         }
      ],
      active: true // First item opened by default (if you like)
   },
   {
      "menu_title": "b",
      "child_routes": [
         {
            "path": "/b1",
            "menu_title": "b1"
         },
         {
            "path": "/b2",
            "menu_title": "b2"
         },
         {
            "path": "/b1",
            "menu_title": "b3"
         }
      ],
      active: false
   },
   {
      // ...
   }
]

app.js
感谢您的快速回复。我还想知道，如果单击另一个导航项目，我如何从当前添加的活动类中删除活动类。当前，每次单击活动类都会继续添加到导航项目上。如果单击一个项目，则应从上一个项目中删除活动类，并添加到当前正在添加的导航项目上ENclicked@Aishwerya请尝试我上面的解决方案，
toggleSidebar
方法应该可以为您完成类切换工作。
.active
类永远不会被添加多次。不过，请确保将初始的
active:false
项添加到单个项中。在完成步骤后，我在您的代码中添加了图像你指导了我。但事实证明，每个导航项目上都添加了该类。我的问题是，我们可以只添加一次吗？例如，如果单击第一个导航项目，则应将其添加到第一个导航项目上；如果单击从第一个导航项目中删除的第二个导航项目，并添加到已单击确定的第二个导航项目上，则听起来您只需要一个活动的
nav-link
每次单击，兄弟姐妹会被停用或崩溃。这应该很简单。我回家后会回到这里。有一个问题是，活动类应该在单击导航项时切换
import * as routes from './routes.json';

const vm = new Vue({
   el: '#app',

   data() {
      return {
         sideBarLinks: {
            routes
         }
      }
   },

   methods: {
      toggleSidebar(index) {
         this.sideBarLinks
            .routes
            .forEach((menu, i) => menu.active = (i === index));
      }
   }
});