Question

我已经制作了jquery来源...... 当鼠标悬停在子菜单上时，在主菜单上添加类（打开）....

所以下面的代码就像这样......

$('#gnbMenu .subM1').hover(function() {
      $('#gnbMenu .m1').toggleClass('on');
    });
    $('#gnbMenu .subM2').hover(function() {
      $('#gnbMenu .m2').toggleClass('on');
    });
    $('#gnbMenu .subM3').hover(function() {
      $('#gnbMenu .m3').toggleClass('on');
    });
    $('#gnbMenu .subM4').hover(function() {
      $('#gnbMenu .m4').toggleClass('on');
    });
    $('#gnbMenu .subM5').hover(function() {
      $('#gnbMenu .m5').toggleClass('on');
    });
    $('#gnbMenu .subM6').hover(function() {
      $('#gnbMenu .m6').toggleClass('on');
    });

我认为这个剧本有点难看，所以有什么方法可以让它更简单干净吗？

Answer 1

改用CSS。

#gnbMenu a:hover {
  background-color: red;
}

你永远不应该使用“悬停”javascript事件，因为它在触摸屏浏览器上效果不佳。

Answer 2

我会将这个逻辑包装在一个函数中并将其称为一个衬里

function MyFunction(hoverSelector,toggleSelector){
 $(hoverSelector).hover(function() {
      $(toggleSelector).toggleClass('on');
    });
 }

Answer 3

尝试

$('#gnbMenu [class*="subM"]').hover(function(){
    $('#gnbMenu .m' + this.className.match(/subM(\d+)/)[1]).toggleClass('on');
})

Answer 4

给他们一个班级（比如subMGeneral）。

为第二个类名称添加data-属性。

e.g。 <span class='subM1 subMGeneral' data-class='m1'>

然后你可以把它全部变成

$('#gnbMenu .subMGeneral').hover(function() {
  $('#gnbMenu .' + $(this).data('class')).toggleClass('on');
});

查看HTML可能会提供更多见解。

Answer 5

将值分配给子菜单，如1,2,3。然后为所有子菜单创建一个公共类（例如：subM）

然后更改下面的代码

 $('#gnbMenu .subM').hover(function() {
  $('#gnbMenu .m'+$(this).val()).toggleClass('on');
});

制作更简单的jquery源代码

5 个答案: