jQuery切换和函数

Question

请看一下我的小提琴：http://jsfiddle.net/wWHz4/

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

当我单击所选标题的按钮时，其他标题必须淡入淡出或切换到*。然后将所选标题动画显示在左侧(而不是静态跳转)，然后将所选标题的内容显示在前面，并将按钮名称从“更多...”更改为*。改成“后退”。当我点击*后退时，我希望内容淡出*，使选定的标题动画回到他的位置*，并将其他标题带回原来的位置*。

Answer 1

我让它按照我想要的方式工作：

$('.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/

Answer 2

将其替换为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 3

要切换文本，可以执行以下操作

$('.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");
});

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