jQuery代碼看起來很兇狠，最好的寫法是什麼？

Question

我有iOS的一個奇怪的問題和滑動菜單（可在Weird iOS animation, display with jQuery?找到）

我相信這是我的邋遢代碼衝突，另一個插件（如在現場的另一版本中，滑動菜單與插件一起工作，但我不能使用該代碼）。

$('#menu-item-134 a').click(function(e) { 
    e.preventDefault(); 
    var elm = $('.open'+$(e.target).parent().attr('id').replace('link', '')); 

    $('.subnav').not(elm).filter(':visible').animate({width: 'toggle'}, 1000); 

    elm.animate({width: 'toggle'}, 1000); 
}); 

$('#menu-item-135 a').click(function(e) { 
    e.preventDefault(); 
    var elm = $('.open'+$(e.target).parent().attr('id').replace('link', '')); 

    $('.subnav').not(elm).filter(':visible').animate({width: 'toggle'}, 1000); 

    elm.animate({width: 'toggle'}, 1000); 
});​ 

腳本的縮短版可以在此的jsfiddle

http://jsfiddle.net/pxd8z/2/

主要是發現了什麼是寫這個腳本的最佳方式？

Answer 1

你可以一次選擇兩個鏈接：http://jsfiddle.net/pxd8z/3/

$('#menu-item-134 a, #menu-item-135 a').click(function(e) { 
    e.preventDefault(); 
    var elm = $('.open'+$(e.target).parent().attr('id').replace('link', '')); 

    $('.subnav').not(elm).filter(':visible').animate({width: 'toggle'}, 1000); 

    elm.animate({width: 'toggle'}, 1000); 
}); 

Answer 2

我會用這樣的代碼

$('.menu-item a').click(function(e) { 
    e.preventDefault(); 
    var elm = $('#open'+e.target.parentNode.id); 

    $('.subnav:visible').not(elm).animate({width: "toggle"}, 1000); 

    elm.animate({width: "toggle"}, 1000); 
});​ 

與這個網站：

<div class="menu-item" id="menu-item-134"> 
    <a href="#" > 
     link1 
    </a> 
</div> 

<div class="menu-item" id="menu-item-135"> 
    <a href="#" > 
     link2 
    </a> 
</div> 

<div class="subnav" id="openmenu-item-134"> 
    box1 
</div> 

<div class="subnav" id="openmenu-item-135"> 
    box2 
</div> 

Jsfiddle在http://jsfiddle.net/pbfy0/3qtYm/

Answer 3

有點更簡潔：http://jsfiddle.net/pxd8z/4/

$('#menu-item-134 a, #menu-item-135 a').click(function(e) { 
    e.preventDefault(); 
    var elm = $('.open'+$(e.target).parent().attr('id').replace('link', '')); 

    $('.subnav:not(' + elm.selector + '):visible').animate({width: 'toggle'}, 1000); 

    elm.animate({width: 'toggle'}, 1000); 
});