0

我有一个脚本可以在 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;
    });
});​
4

4 回答 4

4

从单击的锚点获取索引，在这种情况下必须是 wrapping 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);
    });
});​

小提琴

于 2012-12-13T06:09:16.190 回答
0

给锚标签上课，

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

    });

更新和测试。

于 2012-12-13T06:13:53.110 回答
0

虽然我喜欢@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

于 2012-12-13T06:27:32.420 回答
-1

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

于 2012-12-13T06:01:30.647 回答