jquery切换开关的效率

如果您想寻找更简洁的代码,可以做一些改进, you can see a full updated sample here . 我将列出您可以在下面保存代码的主要区域(当然,对于等效功能)。

主要位:

$($li).children('a').after(
  $(document.createElement('span'))
  .html("  toggler  ")
  .addClass("gm-toggler")
  .hide()
);

可以缩短为…

$li.children('a').after(
  $('<span>', { html: "&nbsp; toggler &nbsp;", 'class': "gm-toggler"}).hide()
);

这个…

$li.hover(function() {
  $('.gm-toggler', this).show();
}, function(){
  $('.gm-toggler', this).hide();
});

可以缩短为…

$li.hover(function(){
  $('.gm-toggler', this).toggle();
});

这个…

if($(this).parent('li').hasClass('active')){
  // ... remove its active class ...
  $(this).parent('li').removeClass('active');
} else {
  // ... otherwise give it an active class.
  $(this).parent('li').addClass('active');
}

可以缩短为…

$(this).parent('li').toggleClass('active');

最好问一下你对哪些部分有疑问,我使用的方法的相关文档可以在这里找到: .toggle() , .toggleClass() , jQuery(html, props) .

看起来写得很好,干得好!我发现唯一可以改进的是第17行,更改:

.html("  toggler  ")

到:

.text("toggler")

然后垫 .gm-toggler 在左侧和右侧使用CSS。

使用 .html 依赖于 .innerHTML 并且会比标准的javascript文本插入慢(但是它会写出   作为文本,因此是填充,这对于分隔表示更为有利)。

另外,在那之前,你可以说 $('<span>') jquery将按照您所写的方式构造它。更具可读性。