鼠标移动到左侧分类上时,右侧自动显示该分类的二级分类导航,鼠标离开时隐藏JavaScript代码
时间: 2024-03-16 07:48:10 浏览: 44
好的,下面是一个简单的JavaScript代码实现方案:
HTML结构:
```html
<div class="category">
<ul>
<li class="parent">分类1
<ul class="child">
<li>二级分类1</li>
<li>二级分类2</li>
<li>二级分类3</li>
</ul>
</li>
<li class="parent">分类2
<ul class="child">
<li>二级分类4</li>
<li>二级分类5</li>
<li>二级分类6</li>
</ul>
</li>
<li class="parent">分类3
<ul class="child">
<li>二级分类7</li>
<li>二级分类8</li>
<li>二级分类9</li>
</ul>
</li>
</ul>
</div>
```
CSS样式:
```css
.category ul {
list-style: none;
margin: 0;
padding: 0;
}
.category .parent {
position: relative;
}
.category .child {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.category .child li {
padding: 5px;
cursor: pointer;
}
.category .child li:hover {
background-color: #f5f5f5;
}
```
JavaScript代码:
```javascript
// 获取左侧分类元素
const parentElems = document.querySelectorAll('.category .parent');
// 循环遍历所有分类元素
parentElems.forEach((parentElem) => {
// 监听鼠标进入事件
parentElem.addEventListener('mouseenter', () => {
// 获取当前分类元素下的二级分类导航元素
const childElem = parentElem.querySelector('.child');
// 显示二级分类导航
childElem.style.display = 'block';
});
// 监听鼠标离开事件
parentElem.addEventListener('mouseleave', () => {
// 获取当前分类元素下的二级分类导航元素
const childElem = parentElem.querySelector('.child');
// 隐藏二级分类导航
childElem.style.display = 'none';
});
});
```
这段代码会监听左侧分类元素的鼠标进入和离开事件,当鼠标进入时会显示该分类的二级分类导航,鼠标离开时会隐藏导航。注意需要根据实际情况调整CSS样式和JavaScript代码。