二级导航滑过显示滑出隐藏,菜单高亮
html
<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
数据格式:
json
{
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
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;
}
数据初始化
java
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);
}
}
递归
java
/*递归*/
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;
}