二级导航滑过显示滑出隐藏，菜单高亮

<div class="nav-title">
     <div class="nav-title-item">
          <div data-index="0" class="name-container">
               <p class="nav-title-name">
                   <a href="/cover-fb1dz103/jiejuefangan" title="解决方案">解决方案</a>
               </p>
          </div>
     </div>
     <div class="nav-title-item">
          <div data-index="1" class="name-container">
               <p class="nav-title-name">
                  <a href="/cover-5zw4gn03/chanpin" title="产品">产品</a>
               </p>
          </div>
     </div>
</div>
<div>
     <div id="nav-two-0" style="display: none;">
           <div class="nav-drop-down">
                   要显示的部分，默认是隐藏的                     
           </div>                   
     </div>
     <div id="nav-two-1" style="display: none;">
           <div class="nav-drop-down">
                   要显示的部分，默认是隐藏的                     
           </div>                   
     </div>
 </div>

JS部分

// 导航二级菜单显示
$(".name-container").mouseenter(function () {
     # 添加高亮css
     $(this).children(".nav-title-name").addClass("name-under");  
     # 找到对应的二级导航显示 
     let index = $(this).data("index");
     let id = "#nav-two-" + index;
     $(id).show();
                
});
$(".name-container").mouseleave(function () {
     # 移除高亮css
     $(this).children(".nav-title-name").removeClass("name-under");
     # 找到对应的二级导航隐藏 
     let index = $(this).data("index");
     let id = "#nav-two-" + index;
     $(id).hide();
});

TreeSelect

含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能

组件：https://element-plus.org/zh-CN/component/tree-select.html

数据格式：

{
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
}

后端JAVA

import lombok.Data;

import java.util.List;

@Data
public class TreeSelect {
    /**
     * 选中的数据值 / ID
     */
    private String id;
    /**
     * 选中的数据值 / ID
     */
    private String value;
    /**
     * 显示的名称
     */
    private String label;
    /**
     * 父ID
     */
    private String parentId;
    /**
     * 是否有子集
     */
    private Boolean last;
    /**
     * 子集
     */
    private List<TreeSelect> children;


}

数据初始化

List<TreeSelect> treeSelectList = new ArrayList<>();
        // 所有分类
        List<GaneCateVo> cateAll = ganeCateService.queryListAll(new GaneCateBo());
        for (GaneCateVo cate : cateAll) {
            if(cate.getFatherId().equals("0")){
                TreeSelect treeSelect = new TreeSelect();
                treeSelect.setId(cate.getId() + "");
                treeSelect.setValue(cate.getId() + "");
                treeSelect.setLabel(cate.getName());
                /**
                 * 查询是否有子级
                 */
                treeSelect = selectSun(treeSelect, cateAll);
                List<TreeSelect> runList = treeSelect.getChildren();
                treeSelect.setChildren(runList);
                treeSelectList.add(treeSelect);
            }
        }

递归

 /*递归*/
    private TreeSelect selectSun(TreeSelect treeSelect, List<GaneCateVo> cateAll) {
        List<TreeSelect> listTrees = new ArrayList<>();
        for (GaneCateVo cate : cateAll) {
            if ((cate.getFatherId() + "").equals(treeSelect.getValue())) {
                TreeSelect select = new TreeSelect();
                select.setId(cate.getId() + "");
                select.setValue(cate.getId() + "");
                select.setLabel(cate.getName());
                select.setParentId(treeSelect.getValue());
                select = this.selectSun(select, cateAll);
                List<TreeSelect> runList = select.getChildren();
                select.setChildren(runList);
                listTrees.add(select);
            }
        }
        treeSelect.setChildren(listTrees);
        return treeSelect;
    }