jQuery代码看起来很糟糕，最好的编写方法是什么？

我在iOS和滑动菜单上遇到了一个奇怪的问题（可以在上找到）

我相信这与我的肮脏代码和另一个插件有冲突（就像在另一个版本的网站上一样，滑动菜单与插件一起工作，但我不能使用该代码）

可以在此JSFIDLE上找到该脚本的缩短版本

---

基本上，写剧本的最佳方式是什么

您可以同时选择两个链接：

我会使用这样的代码

$('.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>

框1
框2

​

jshiddle at

更简洁一点：

---

您应该将您的代码添加到SO上的问题，而不仅仅是链接到它。而且，使用诸如“被屠宰的”和“邋遢的”这样的模糊术语对我们也没有多大帮助。我的代码相当优雅

$('.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>

$('#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);
});