请教一下老师一级菜单与二级菜单切换的问题
我的一个疑问是关于鼠标移入二级菜单后，一级菜单的右侧箭头的一个颜色切换问题，我发现鼠标移入二级菜单后，再移入一级菜单，右侧的小箭头会改变为js移出二级菜单后的颜色，也就是一级菜单的hover效果不生效了，请老师讲解一下，因为代码超过了10W个字符，不能传代码
正在回答
同学你好， 请问你如下图所示， 一级菜单和二级菜单切换的问题吗？
如果是指这里的话。那么因为不知道同学的代码结构， 所以无法准确的定位问题， 老师这里就给同学提供一个思路作为参考
1、HTML结构中，将一级菜单对应的二级菜单作为兄弟元素放在同一个盒子下
2、 js中，给父级元素添加鼠标移入事件， 然后设置一级菜单的样式和二级菜单的显示， 示例：
同学可以结合示例，自己下去测试一下， 如果还有问题， 建议：同学可以粘贴与这部分功能相关的代码， 便于准确的定位和解决问题。
如果不是指这里， 建议： 可以详细的描述一下指的是哪里， 再次提问， 我们会继续为你解答的
如果帮助帮助到了你， 欢迎采纳！
祝学习愉快~~~
js：
$('.titleLeft').hover(function(){
$('.banner-item').eq($(this).index()-1).css('display','block').siblings().css('display','none');
},function(){
$('.banner-item').css('display','none');
$('.titleLeft i').eq($(this).index()).css('color','rgba(255,255,255,0.5)');
})
$('.banner-item').hover(function(){
$(this).css('display','block');
$('.titleLeft').eq($(this).index()).addClass('changeTitle');
$('.titleLeft span').eq($(this).index()).addClass('changeA');
$('.titleLeft i').eq($(this).index()).css('color','red');
$('.titleLeft').trigger('hover');
},function(){
$(this).css('display','none');
$('.titleLeft').eq($(this).index()).removeClass('changeTitle');
$('.titleLeft span').eq($(this).index()).removeClass('changeA');
$('.titleLeft i').eq($(this).index()).css('color','rgba(255,255,255,0.5)');
})
// 全局变量
var prev = $('.banner-item-left'),
next = $('.banner-item-right'),
imgs = $('.banner1'),
timer,
len = imgs.length,
dots = $('.scroll span'),
index = 0,
check=$('.floor-right-top a'),
checkTwo=$('.floor-right-bottom a'),
items=$('.floor-map'),
itemsTwo=$('.floor-map-2');
//左箭头
prev.click(function() {
index--;
// 判断条件进行了修改
if (index < 0) {
index = len - 1;
}
// 将参数去掉
changeImg();
});
//右箭头
next.click(function() {
index++;
// 添加判断条件
if (index > len - 1) {
index = 0;
}
// 将参数去掉
changeImg();
});
// 圆点图片切换
dots.click(function() {
// index = dots.index($(this));
// 获取圆点索引错误,直接$(this).index()即可
index = $(this).index();
changeImg();
});
// 鼠标移入移出
$('.banner-item-top').hover(function() {
//鼠标移入
clearInterval(timer);
// 添加function
}, function() {
slideImg()
});
// 鼠标移入取消计时器
// 自动循环
function slideImg() {
timer = setInterval(function() {
index++;
// 添加判断条件
if (index > len - 1) {
index = 0;
}
changeImg();
}, 1000);
};
// 调用定时器
slideImg();
//点击切换二级界面
check.hover(function(){
index = $(this).index()/2;
changItem();
})
checkTwo.hover(function(){
index = $(this).index()/2;
changItemTwo();
})
// 切换图片
function changeImg() {
// 圆点切换
// dots.eq(index).addClass('.dots .active').siblings().removeClass('.dots .active');
// banner循环
//给当前图片添加样式需要写索引，同辈只给img图片隐藏
imgs.eq(index).css({ 'opacity': '1' }).siblings('img').css({ 'opacity': '0' });
// 圆圈添加类型直接写active即可
dots.eq(index).addClass('active').siblings().removeClass('active');
}
function changItem(){
items.eq(index).removeClass('classname').siblings('.floor-map').addClass('classname');
check.eq(index).css({'color':'red'}).siblings('a').css({'color':'gray'});
}
function changItemTwo(){
itemsTwo.eq(index).removeClass('classname').siblings('.floor-map-2').addClass('classname');
checkTwo.eq(index).css({'color':'red'}).siblings('a').css({'color':'gray'});
}
css：
.banner-all{
width: 1000px;
height: 450px;
}
.banner-box{
position:absolute;
width: 200px;
height: 500px;
margin-left: 430px;
/*310*/
margin-top: -56px;
/*background:rgba(255,0,0,0.9);*/
}
.titleLeft{
background:rgba(255,0,0,0.9);
position: relative;
width: 185px;
height: 32px;
padding-left: 16px;
line-height: 32px;
}
.titleLeft:hover{
background-color:white;
cursor: pointer;
}
.titleLeft:hover a{
color: black;
}
.titleLeft:hover i{
color: red;
}
.titleLeft a{
text-decoration: none;
color:#fff;
}
.titleLeft span{
font-size:13px;
}
.titleLeft i{
position: absolute;
right: 0px;
color: rgba(255,255,255,0.5);
font-size: 24px;
top: 2px;
font-style:normal;
font-weight:normal;
font-family:"iconfont";
}
.changeTitle{
background:white;
}
.changeA{
color:black;
}
.changeI{
color:red;
}
.banner-item{
display: none;
position: absolute;
top: 56px;
left: 200px;
float: left;
width:577px;
height:500px;
background: white;
border:2px solid rgba(8,1,3,0.1);
z-index: 299;
}
.banner-item div{
width: 480px;
margin-left: 38px;
margin-top: 20px;
}
.banner-item a:hover{
color: red;
}
.banner-item div>span:first-child{
font-size: 12px;
font-weight: bold;
}
.banner-item div>span:nth-child(2){
margin-left: 12px;
}
.banner-item a{
text-decoration: none;
color: gray;
font-size: 12px;
margin-left: 12px;
}
刚上传错了 ，我重新传一下代码
HTML：
<div class="banner-all">
<div class="banner-box">
<div class="titleLeft">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="banner-item-all">
<div class="banner-item">
<div>
<span>手机pass</span>
<span>|</span>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">以旧换新</a>
<a href="#">手机维修</a>
</div>
<div>
<span>冰箱</span>
<span>|</span>
<a href="#">充话费/流量</a>
<a href="#">170选号</a>
<a href="#">合约机</a>
<a href="#">办套餐</a>
<a href="#">选号码</a>
<a href="#">固话宽带</a>
<a href="#">京东通信</a>
<a href="#">中国移动</a>
<a href="#">中国联通</a>
<a href="#">中国电信</a>
</div>
<div>
<span>洗衣机</span>
<span>|</span>
<a href="#">手机壳</a>
<a href="#">贴膜</a>
<a href="#">手机储存卡</a>
<a href="#">数据线</a>
<a href="#">充电器</a>
<a href="#">手机耳机</a>
<a href="#">创意配件</a>
<a href="#">手机饰品</a>
<a href="#">手机电池</a>
<a href="#">苹果周边</a>
<a href="#">移动电源</a>
<a href="#">蓝牙耳机</a>
<a href="#">手机支架</a>
<a href="#">车载配件</a>
<a href="#">拍照配件</a>
</div>
<div>
<span>电脑</span>
<span>|</span>
<a href="#">数码相机</a>
<a href="#">单电/微单相机</a>
<a href="#">单反相机</a>
<a href="#">拍立得</a>
<a href="#">运动相机</a>
<a href="#">摄像机</a>
<a href="#">镜头</a>
<a href="#">户外器材</a>
<a href="#">影棚器材</a>
<a href="#">冲印服务</a>
<a href="#">数码相框</a>
</div>
<div>
<span>微波炉</span>
<span>|</span>
<a href="#">存储卡</a>
<a href="#">三脚架/云台</a>
<a href="#">相机包</a>
<a href="#">滤镜</a>
<a href="#">闪光灯/手柄</a>
<a href="#">相机清洁/贴膜</a>
<a href="#">机身附件</a>
<a href="#">镜头附件</a>
<a href="#">读卡器</a>
<a href="#">支架</a>
<a href="#">电池/充电器</a>
</div>
<div>
<span>开水壶</span>
<span>|</span>
<a href="#">耳机/耳麦</a>
<a href="#">音箱/音响</a>
<a href="#">便携/无线音响</a>
<a href="#">收音机</a>
<a href="#">麦克风</a>
<a href="#">MP3/MP4</a>
<a href="#">专业音频</a>
</div>
<div>
<span>吹风机</span>
<span>|</span>
<a href="#">智能手环</a>
<a href="#">智能手表</a>
<a href="#">智能眼睛</a>
<a href="#">智能机器人</a>
<a href="#">运动跟踪器</a>
<a href="#">健康检测</a>
<a href="#">智能配饰</a>
<a href="#">智能家居</a>
<a href="#">体感无人机</a>
<a href="#">其他配件</a>
</div>
<div>
<span>缝纫机</span>
<span>|</span>
<a href="#">学生平板</a>
<a href="#">点读机/笔</a>
<a href="#">早教益智</a>
<a href="#">录音笔</a>
<a href="#">电纸书</a>
<a href="#">电子词典</a>
<a href="#">复读机</a>
</div>
</div>
</div>
</div>
</div>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星