1

私のフィドルを見てください：http：//jsfiddle.net/wWHz4/

これは、jQueryに関する少しの知識でこれまでに作成したものです。私は以下が欲しい：

選択したタイトルのボタンをクリック*すると、他のタイトルはフェードまたはトグル*する必要があります。次に、選択したタイトルを（静的ジャンプではなく）左側にアニメーション化*してから、選択したタイトルのコンテンツを前面に表示*し、ボタン名を「詳細...」から「背面」に変更*します。背面をクリック*すると、コンテンツをフェードアウト*させ、選択したタイトルをアニメーション化して元の位置に戻し*、他のタイトルを元の位置に戻します*。

4

4 に答える 4

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");
});
于 2012-10-11T12:16:00.340 に答える
1

テキストを切り替えるには、次のようにします

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

他のすべてはあなたのデモで働いています

于 2012-10-11T12:11:43.813 に答える
0

私はそれを私が望んでいたように動作させました：

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

于 2012-10-24T14:08:20.203 に答える
0

<a>jquery .html() [ http://api.jquery.com/html/ ]関数を使用してタグのプロパティを変更できます。また<div>、全文を含むを配置しdisplay、そのdivの状態noneを前後に切り替えて表示することもできますblock。全文。

あなたはあなたが望むものに似た何かをするjqueryを使ってアコーディオンコードを見ることができます：http：//jqueryui.com/accordion/

于 2012-10-11T12:09:46.280 に答える