效率的jQuery toggler

Question

這裏的鏈接到我的代碼：http://jsbin.com/edago3/edit

我很想找出可以作出什麼樣的改進，使之更小，更高效。

任何幫助表示讚賞。

Answer 1

如果您正在尋找更簡潔的代碼，您可以進行多項改進，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)。

Answer 2

看起來寫得很好，很好的工作！唯一的小事情，我發現可以改進的是第17行，更改：

.html("  toggler  ") 

到：左側

.text("toggler") 

，然後墊.gm-toggler，右與CSS。

使用.html依靠.innerHTML和會比標準的JavaScript文本插入較慢（但它寫出來的 作爲文本，因此填充，這是無論如何分離呈現更好）。

此外，在此之前的行，你可以說$('<span>')和jQuery將構建完全按照你寫的。更具可讀性。