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

Posted 2023-02-22

【中文标题】VueJS 中的下拉菜单（活动菜单的切换）

【英文标题】：Dropdown menu in VueJS (toggling of active menu)

【发布时间】：2019-05-13 08:05:00

【问题描述】：

这是我的导航菜单和方法下方的菜单，点击时应打开导航项内的子项，但我似乎无法找到我缺少的地方

[![dropdown_menu][1]][1]

new Vue(
      el: '#app',
      data: 
//menu
        "menu_title": "a",
        "child_routes": [
            "path": "/a1",
            "menu_title": "a1"
          ,
          
            "path": "/a2",
            "menu_title": "a2"
          
        ]
      ,
      
        "menu_title": "b",
        "child_routes": [
            "path": "/b1",
            "menu_title": "b1"
          ,
          
            "path": "/b2",
            "menu_title": "b2"
          ,
          
            "path": "/b1",
            "menu_title": "b3"
          
        ]
      ,
      
        "menu_title": "c",
        "child_routes": [
            "path": "/c1",
            "menu_title": "c1"
          ,
          
            "path": "/c2",
            "menu_title": "c2"
          ,
          
            "path": "/c3",
            "menu_title": "c3"
          
        ]
      
    ,
    methods: 
      navlinks() 
        var navItemParent = document.querySelector("nav-item");
        var navLink = document.querySelector(".idb-nav .nav-item .nav-link");
        var navItem = document.querySelector(".idb-nav .nav-item");
        navItem.classList.toggle("active");

        if (navItem.contains("active")) 
          navItem.classList.remove("active");
          navLink.classList.toggle("active");
        

      

    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <nav class="idb-sidebar-nav">
    <ul class="idb-nav list-unstyled m-15 p-0">
      <template v-for="(menu, index) in sideBarLinks.routes">
					<li class="nav-item" v-if="menu.child_routes!=null" :key="index">
						<a href="javascript:void(0)" class="nav-link" @click="navlinks"  >
							<i :class="menu.menu_icon" class="menu-icon"></i>
							<span class="menu-title">menu.menu_title</span>
						</a>
            <ul class="list-unstyled sub-menu">
							<router-link 
								:to="subMenu.path" 
								tag="li" 
								v-for="(subMenu, key) in menu.child_routes" 
								:key="key"
							>
								<a href="javascript:void(0)" class="sub-menu-nav-link">
									<span>subMenu.menu_title</span>
								</a>
							</router-link>
						</ul>
					</li>
					<router-link 
						:key="index" 
						:to="menu.path" 
						tag="li" 
						class="nav-item" 
						v-else
					>
						<a class="nav-link">
							<i :class="menu.menu_icon" class="mr-15"></i>
							<span class="menu-title">menu.menu_title </span>
						</a>
					</router-link>
				</template>
    </ul>
  </nav>
</div>

【问题讨论】：

有一个问题是活动类应该在点击导航项时切换

【参考方案1】：

类切换应作为data 的一部分进行管理。试试这个，看看它是否适合你：

html

<div id="app">
   <nav class="idb-sidebar-nav">
      <ul class="idb-nav list-unstyled m-15 p-0">
         <template v-for="(menu, index) in sideBarLinks.routes" :key="index">
            <li class="nav-item"
                  v-if="menu.child_routes && menu.child_routes.length">

               <a :class="[ 'nav-link',  'active': menu.active  ]"
                  href="javascript:void(0);"
                  @click="toggleMenu(index)">

                  <i :class="menu.menu_icon" class="menu-icon"></i>
                  <span class="menu-title">menu.menu_title</span>
               </a>

               <ul class="list-unstyled sub-menu">
                  <router-link tag="li"
                               v-for="(subMenu, key) in menu.child_routes"
                               :key="key"
                               :to="subMenu.path">
                     <a href="javascript:void(0);" class="sub-menu-nav-link">
                        <span>subMenu.menu_title</span>
                     </a>
                  </router-link>
               </ul>
            </li>

            <router-link v-else
                         :key="index"
                         :to="menu.path"
                         tag="li"
                         class="nav-item">

               <a :class="[ 'nav-link',  'active': menu.active  ]"
                  href="javascript:void(0);"
                  @click="toggleMenu(index)">

                  <i :class="menu.menu_icon" class="mr-15"></i>
                  <span class="menu-title">menu.menu_title </span>
               </a>

            </router-link>
         </template>
      </ul>
   </nav>
</div>

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

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));
      
   
);

【讨论】：

感谢您的快速回复。我还想知道如果单击另一个 nav-item ，如何从当前添加的活动类中删除活动类。目前，每次点击活动类都会继续添加到 nav-item 。如果单击一个项目，它应该从上一个项目中删除活动类并添加到当前被单击的导航项目中

@Aishwerya 请尝试我上面的解决方案，toggleSidebar 方法应该为您完成类切换工作。 .active 类永远不会被多次添加。

请务必将初始 active: false 项目添加到各个项目中。

我已经在您的代码中添加了图像，按照您指导我的步骤进行操作之后.. 但结果发现该类已添加到每个 nav-item 中。我的问题是我们可以只添加一次吗，例如，如果单击第一个导航项应该首先添加，如果单击第二个导航项从第一个导航项中删除并添加第二个导航项被单击跨度>

好的，听起来您每次点击只需要一个活动的nav-link，并且兄弟姐妹停用或折叠。这应该很简单。我回家后会回到这个。