jquery - 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);
});​

使用这个 html：

<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>

​</p>

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);
});