0

何よりもまず、私の jQuery は本当に最悪です。次の出力をレンダリングする Wordpress ループに「ul」があります。「li」タグは、ループ内の個々の投稿です。

<ul id="list">
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
etc...etc..etc

私が欲しいのは、ここで見ることができるものです: http://www.aatsol.co.za/temp/some_jquery/

ユーザーに「詳細を表示」をクリックしてもらい、2 番目の div を最初の div の上にスライドさせて、「back div」にある連絡先の詳細を表示するだけです。

もう1つの薄い点は、連絡先の詳細に「X」のみを表示して、ユーザーがウィンドウを閉じて最初のdivに戻ることができるようにすることです。私は何かをしようとしましたが、それ以上進むことができません.3行のjQueryで2週間作業しています。大変お世話になりました。

私のjQuery：

$(document).ready(function() {
$(".box").click(function(){    
    $(this).find('.inner').stop().animate({top:0});    
});

// to close back div - not even touched 
$("a.close").click(function(){
    alert("close");
    $(this).find('.inner').stop().animate({top:340});
});});

みんな助けて！

4

1 に答える 1

0

私は最終的に正しかったので、自分の質問に答えたほうがよいでしょう。結果を得るために、次のjqueryスクリプトで「トグル」を使用しました。

$(".box").toggle(function(){
$(this).find(".inner").stop().animate({top:0});
}, function() {
$(this).find(".inner").stop().animate({top:340});} );

幸運を！！

于 2012-12-12T14:47:00.750 に答える