Question

我很想知道可以做些什么改进以使其更小更高效。

感谢任何帮助。

Answer 1

如果您正在寻找更简洁的代码you can see a full updated sample here，可以进行一些改进。我将在下面列出您可以保存代码的主要区域（当然，等效功能）。

主要部分：

$($li).children('a').after(
  $(document.createElement('span'))
  .html("&nbsp; toggler &nbsp;")
  .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)。

Answer 2

看起来写得很好，干得好！我找到的唯一可以改进的小东西是第17行，更改：

.html("&nbsp; toggler &nbsp;")

为：

.text("toggler")

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

使用.html依赖.innerHTML并且比标准Javascript文本插入慢（但它会将 写为文本，因此填充，这更适合分离无论如何演示。）

此外，在此之前的行中，您可以说$('<span>')，jQuery将完全按照您的编写方式构建它。更具可读性。

jquery toggler的效率

2 个答案: