Question

这是我到目前为止用我的一些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 <a> [http://api.jquery.com/html/]功能更改.html()代码的属性，也可以放置包含全文的<div>并切换状态从display到none的div的block并返回以显示全文。

您可以使用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/

jQuery切换和功能

4 个答案: