jquery - jQuery 切换和功能

Question

请看看我的小提琴：http: //jsfiddle.net/wWHZ4/

这就是我到目前为止用我的一点 jQuery 知识所做的。我想要以下内容：

当我单击*选定标题的按钮时，其他标题必须淡出或切换*。然后动画*选定的标题向左（而不是静态跳跃），然后将所选标题的内容显示*到前面，并将按钮名称从“更多...”更改为“后退”。当我单击*背面时，我希望内容消失*，将所选标题动画返回到他的位置*，然后将其他标题恢复到原来的位置*。

Answer 1

将其替换为 js 代码

$('.group .title > div a.button').click(function() {
    if ($(this).parent().siblings().is(":visible")) {
        $(this).text('back');
    } else {
        $(this).text('more');
    }
    $(this).parent().siblings().slideToggle("slow");
    var indexcount = $(this).parent().index() + 1;
    $('.content').find('.columns:nth-child('+indexcount+')').slideToggle("slow");
});

Answer 2

要切换文本，您可以这样做

$('.group .title > div a.button').click(function(){
    $(this).html(($(this).html() == "more...")?"back":"more...");
    $(this).parent().siblings().slideToggle("slow");
    $(this).parent().parent().siblings().slideToggle("slow");
});

其他一切都在您的演示中工作

Answer 3

您可以使用 jquery [ http://api.jquery.com/html/ ] 函数更改<a>标签的属性，也可以放置一个包含全文并切换该div的状态来回显示全文。.html()<div>displaynoneblock

您可以查看使用 jquery 的手风琴代码，它的功能类似于您想要的：http: //jqueryui.com/accordion/

Answer 4

我让它像我想要的那样工作：

$('.group .title > div a.button').click(function() {

    var self = this;
    var speed = 500;
    var indexcount = $(self).parent().index() + 1;
    var subcontent = $('.content').find('.columns:nth-child(' + indexcount + ')');

    if ($(self).parent().siblings().is(":visible")) {
        $(self).text('back');
        $(self).parent().siblings().toggle(speed);
        subcontent.delay(speed).toggle("slide", speed);

    } else {
        $(self).text('more');
        subcontent.toggle("slide", speed, function() {
            $(self).parent().siblings().toggle(speed);
        });

    }

});

见小提琴：http: //jsfiddle.net/wWHZ4/