0

我有几个链接，应该像这样切换它们对应的 div...

    $('#link a').click(function() {
        $('#open').animate({width: 'toggle'});
      });

    $('#link2 a').click(function() {
        $('#open2').animate({width: 'toggle'});
      });

    $('#link3 a').click(function() {
        $('#open3').animate({width: 'toggle'});
      });

问题是如果您单击#link，然后单击#link2，两个框都保持打开状态。

所有的 '#open' div 共享同一个类，所以我使用了

$('#link1 a').click(function() {
        $('shared-class').hide();
        $('#open1').animate({width: 'toggle'});
      });

哪个确实有效，但它看起来很粗糙，因为 hide 没有滑入，如果我在类上使用了切换，它会混淆输出的顺序和输入的顺序，我不确定是否只有一种方法在 IF IT IS OUT 中滑动一个元素，希望这是有道理的，非常感谢任何帮助！

编辑

http://jsfiddle.net/PEfHc/

基本上如果我点击 1，所有其他的都不应该显示

4

2 回答 2

1

你可以做这样的事情：

$('#link1 a').click(function(e) {
    e.preventDefault();
    $('.shared-class:visible').animate({width: 'toggle'});
    $('#open1').animate({width: 'toggle'});
});

就像在这个小提琴中

无论如何，这个需要分解，它只是为了演示目的。

于 2012-05-03T12:00:46.477 回答
1

肯定有更简单的方法来做这种事情，但无论如何：

$('a', '[id^="link"]').click(function(e) {
    e.preventDefault();
    var elm = $('#open'+$(e.target).parent().attr('id').replace('link', ''));
    $('[id^="open"]').not(elm).filter(':visible').animate({width: 'toggle'}, 1000);
    elm.animate({width: 'toggle'}, 1000);
});​

小提琴

于 2012-05-03T10:15:51.410 回答