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