0

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

所以下面的代码是这样的......

$('#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');
    });

我觉得这个脚本有点难看，那么有没有什么方法可以让脚本更简洁干净呢？

4

5 回答 5

1

Use CSS instead.

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

You should never use the "hover" javascript event because it doesn't work well on touch screen browsers.

于 2013-09-17T05:46:28.260 回答
1

I would wrap this logic in a function and call it as one liners

function MyFunction(hoverSelector,toggleSelector){
 $(hoverSelector).hover(function() {
      $(toggleSelector).toggleClass('on');
    });
 }
于 2013-09-17T05:47:03.510 回答
1

尝试

$('#gnbMenu [class*="subM"]').hover(function(){
    $('#gnbMenu .m' + this.className.match(/subM(\d+)/)[1]).toggleClass('on');
})
于 2013-09-17T05:49:45.760 回答
1

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

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

例如<span class='subM1 subMGeneral' data-class='m1'>

然后你可以把它全部变成

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

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

于 2013-09-17T05:49:47.083 回答
1

为子菜单分配值，如 1、2、3。然后为所有子菜单创建一个通用类（例如：subM）

然后像下面这样更改代码

 $('#gnbMenu .subM').hover(function() {
  $('#gnbMenu .m'+$(this).val()).toggleClass('on');
});
于 2013-09-17T05:53:18.333 回答