jQuery代碼寫得/優化？

我只是想知道，因爲所有3做同樣的事情只是爲了不同的id能不能更好地採寫/優化？jQuery代碼寫得/優化？

$('#top_menu,#commun_links,#q_links').hide(); 

$('#top_menu_toggle').click(function() { 
    $(this).text($(this).text() == '+ Menu' ? '- Menu' : '+ Menu'); 
    $('#top_menu').slideToggle('slow').css({'display' : 'block'}); 
    return false; 
}); 

$('#commun').click(function() { 
    $(this).text($(this).text() == '+ Community' ? '- Community' : '+ Community'); 
    $('#commun_links').slideToggle('slow'); 
    return false; 
}); 

$('#qnav').click(function() { 
    $(this).text($(this).text() == '+ Quick Links' ? '- Quick Links' : '+ Quick Links'); 
    $('#q_links').slideToggle('slow'); 
    return false; 
});

像往常一樣，所有的幫助表示讚賞，並提前感謝。

來源

2011-11-24 Dizzi

只要創建一個將一切綁定，參數化，這樣你可以通過您想監聽點擊一個功能，你要什麼樣的slideToggle元素和標籤要上的按鈕設置。

function bindClick(click_tgt, rel_el, label) { 

    $(click_tgt).click(function() { 
     $(this).text($(this).text() == '+ ' + label ? '- ' + label : '+ ' + label); 
     $(rel_el).slideToggle('slow').css({'display' : 'block'}); 
     return false; 
    }); 
} 

$('#top_menu,#commun_links,#q_links').hide(); 

bindClick('#top_menu_toggle', '#top_menu', 'Menu'); 
bindClick('#commun', '#commun_links', 'Community'); 
bindClick('#qnav', '#q_links', 'Quick Links');

並將它命名爲任何你最適合:)

來源

2011-11-24 12:05:10

標記爲答案，謝謝湯姆塗。 – Dizzi

隱藏行有一個額外的'需要刪除 – Dizzi

固定，歡呼Dizzi –

假設標記，甚至更好用嵌套的UL> LI風格

由鏈接

<a class='menu' href='#' data-label='Menu'>Menu</a> 
<ul class='items'> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

<a href='#' data-label='Community'>Community</a> 
<ul class='items'> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

<a href='#' data-label='Quick Links'>Quick Links</a> 
<ul class='items'> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 

$('.items').hide(); 
$('.menu').click(function() { 
    var $this = $(this); 
    var label = $this.data('label'); 
    $this.text($this.text() == '+ ' + label ? '- ' + label: '+ ' + label); 
    $this.next('ul:first').slideToggle('slow'); 
    return false; 
});

您可以將此

來源

2011-11-24 12:08:18 JohnP

我已經優化完整的軟件包你....你可能會感興趣。

入住這Jsfiddle鏈接

考慮HTML

<div divtotog="top_menu" class="tog" tex="Menu">+ Menu</div> 
<div divtotog="commun_links" class="tog" tex="Community">+ Community</div> 
<div divtotog="q_links" class="tog" tex="Quick Links">+ Quick Links</div> 

<br> 
<div id="top_menu" style="display:none;">top_menu</div> 
<br> 
<div id="commun_links" style="display:none;">commun_links</div> 
<br> 
<div id="q_links" style="display:none;">q_links</div>

jQuery的

$('.tog').click(function() { 
    var txt = $(this).attr("tex"); 
    $(this).text($(this).text() == '+ '+txt ? '- '+txt : '+ '+txt); 
    $("#"+$(this).attr("divtotog")).slideToggle('slow').css({'display' : 'block'}); 
    return false; 
});

來源

2011-11-24 12:10:01 Wazzzy

不會添加變得更好？ ... VAR的txt = $（本）.attr（「特」）; – Dizzi

@Dizzi是啊我同意.... – Wazzzy

jQuery代碼寫得/優化？

回答

相關問題