Question

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

我有两个链接。链接一是＆＃34;链接一个＆＃34;另一个是＆＃34; Link two＆＃34;你可以在jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/

上看到代码

它可以显示和隐藏，但我不能让它显示一个和另一个。它显示了一切。

如果我按链接一，我想显示＆＃34; .open-container-One＆＃34; 如果我按Link 2，我只想显示＆＃34; open-container-Two＆＃34;

希望您了解我的问题。

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

Answer 1

从单击的锚点获取索引，在这种情况下必须是包装li，然后使用该索引在.test元素集合中选择正确的索引。无需重新创建已构建到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

Answer 2

将类赋予锚标记

<a href="#" class="link1">Link 01</a>
 <a href="#" class="link2">Link 02</a>

将相应的类作为id作为

的div标记

<div id="link1" class="test">
...
...
</div>

<div id="link2" class="test">
...
...
</div>

在您的javascript函数中执行以下更改

$('a').click(function() {

         $('div.test').hide();
        var showDivClass = $(this).attr("class");
        $("#" + showDivClass).show().animate({
                height: height
            }, {
                duration: 500
            });
        $('div.test').not("#" + showDivClass).hide().animate({
                height: 0
            }, {
                duration: 500
            });

    });

更新并测试。

Answer 3

虽然我喜欢@ adeneo的答案，但我更喜欢使用选择器而不是元素的方法：

$(".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的数量相同，且顺序相同。

参见 JSFIDDLE

Answer 4

请提供锚标记的ID，该标记与您需要显示/隐藏的类相同。并用id标签替换$ div

隐藏/显示不同的链接

4 个答案: