javascript - 隐藏/显示不同的链接

Question

我有一个可以在 jsfiddle 上的一个链接上运行的脚本。

我有两个链接。链接一是“链接一”，另一个是“链接二”，您可以在 jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/ 上看到代码

它可以显示和隐藏，但我无法让它显示一个或另一个。它显示了一切。

如果我按链接一我想显示“.open-container-One” 如果我按链接二我只想显示“open-container-Two”

希望您理解我的问题。

js代码:

$(document).ready(function() {
    var $div = $('.test');
    var height = $div.height();
    $div.hide().css({
        height: 0
    });

    $('a').click(function() {
        if ($div.is(':visible')) {
            $div.animate({
                height: 0
            }, {
                duration: 500,
                complete: function() {
                    $div.hide();
                }
            });
        } else {
            $div.show().animate({
                height: height
            }, {
                duration: 500
            });
        }

        return false;
    });
});​

Answer 1

从单击的 anchor 获取索引，在本例中，该索引必须是包装 li，然后使用该索引在 .test< 集合中选择正确的 anchor 元素。无需重新创建已内置于 jQuery 中的 SlideUp/Down。

$(function() {
    var elems = $('.test').hide();

    $('a').click(function(e) {
        e.preventDefault();
        var selEl = elems.eq($(this).closest('li').index());
        selEl.slideToggle(600);
        elems.not(selEl).slideUp(600);
    });
});​

FIDDLE