隐藏/显示其他链接 [英] Hide/Show different links

问题描述

我有一个脚本可以在jsfiddle上的一个链接上工作.

I have a script that works on one link on jsfiddle.

我有两个链接.链接之一是链接一"，另一个是链接二"，您可以在jsfiddle =

I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/

它可以显示和隐藏，但我不能使其显示一个和另一个.它显示了一切.

It works to show and hide but i cant make it show one and other. It shows everything.

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

If i press Link one I want to show ".open-container-One" And if I press Link two i just want to show "open-container-Two"

希望您能理解我的问题.

Hope you understand my issue.

jsCode:

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

推荐答案

尽管我喜欢@adeneo的答案，但我更喜欢使用选择器而不是元素的方法:

Although I like @adeneo's answer, I prefer this method using selectors rather than elements :

$(".test").hide();
$('.list a').each(function(i) {
    $(this).on("click", function() {
        $(".test").slideUp(0).eq(i).slideDown(400, function() {
            $(".close a").on("click", function() {
                $(".test").slideUp();
            }); // on click close
        }); // after slideDown (shown div)
    }); // on click link
}); // each 

唯一的条件是链接(列表项)的数量应与要显示的div的数量相同并且顺序相同.

The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.

请参见 JSFIDDLE

See JSFIDDLE

这篇关于隐藏/显示其他链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！