后台多个下拉菜单实现

• 实现功能：管理后台多个下拉菜单
• 环境：VUE3+jquery

效果：

HTML

<template>
  <div class="main">
    <div class="left">
      <div class="nav">

        <div class="nav_item">
          <div id="itema" class="nav_item_a">
            <div class="nav_item_a_left">
              <i><img src="@/assets/index/huanying.png"/></i><span>欢迎</span>
            </div>
            <div class="nav_item_a_right">
              <i><img src="@/assets/index/sanjiao.png"/></i>
            </div>
          </div>
          <div class="nav_item_b">
            <ul>
              <li>首页</li>
              <li>设置</li>
            </ul>
          </div>
        </div>

        <div class="nav_item">
          <div id="itemb" class="nav_item_a">
            <div class="nav_item_a_left">
              <i><img src="@/assets/index/wenzhang.png"/></i><span>文章</span>
            </div>
            <div class="nav_item_a_right">
              <i><img src="@/assets/index/sanjiao.png"/></i>
            </div>
          </div>
          <div class="nav_item_b">
            <ul>
              <li>发布</li>
              <li>管理</li>
            </ul>
          </div>
        </div>



      </div>
    </div>
    <div class="right">  </div>
  </div>
</template>

JS

import $ from 'jquery';


let arr = [];
$(function(){
  $(".nav_item_a").on('click',function(){

    let i = $(this).parent(".nav_item").index();

    if(arr[i]!=1){
      $(this).addClass("active_li");
      $(this).children(".nav_item_a_right").children("i").children("img").attr("src","/src/assets/index/sanjiao2.png");
      arr[i] = 1;
    }else{
      $(this).removeClass("active_li");
      $(this).children(".nav_item_a_right").children("i").children("img").attr("src","/src/assets/index/sanjiao.png");
      arr[i] = 0;
    }
    

    console.log(arr);
    
    
    $(this).siblings(".nav_item_b").slideToggle();
    
  })
})


  

CSS

.main{
  background-color: rgb(236, 236, 236);
  width: 100%;
  float:left;
}
.left{
  float: left;
  width: 8%;
  padding:2% 1%;
  background-color: #fff;
  height: 800px;
  
}
.right{
  float: right;
  width: 86%;
  padding: 1%;
}
.nav{
  height: auto;
  float:left;
  width: 100%;
}
.nav_item{
  /* background-color: rgb(215, 246, 255); */
  padding: 10px 10px;
  border-radius: 4px;
  margin-bottom: 10px;

  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: space-between; */
}


.nav_item_a{
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-between;
  padding: 7px 10px;
  border-radius: 3px;
  
}
.nav_item_a:hover{
  background-color: rgb(241, 241, 241);
}

.nav_item_a_left{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav_item_a_left img{
  height: 20px;
  width: auto;
}
.nav_item_a_left span{
  margin-left: 10px;
}
.nav_item_a_right{
 
  display: flex;
  flex-direction: row;
  align-items: center;
}



.nav_item_b{
  display: none;
  /* background-color: rgb(223, 255, 255); */
}
.nav_item_b ul{
  
}
.nav_item_b ul li{
  list-style: none;
  padding: 10px 0;
  padding-left: 40px;
  margin-top: 5px;
  border-radius: 3px;
}
.nav_item_b ul li:hover{
  background-color: rgb(241, 241, 241);
  cursor: pointer;
}

.active_li{
  background-color: #dfefff;
}

注意事项

多个下拉菜单需要准确获取每个菜单的index值，然后用数组方式管理每个菜单的状态。