Question

iOS有一个奇怪的问题和一个滑动菜单（可以在Weird iOS animation, display with jQuery?找到）

我认为与我的邋code代码和另一个插件存在冲突（在该网站的另一个版本上，滑动菜单与插件一起使用，但我无法使用该代码）。

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

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

jQuery代码看起来像屠宰，最好的写作方式？

3 个答案: