0

だから私は次の基本的なhtmlを持っています

<div id="front-page-slide">

    <div id = "slider-panel">

        Social Logins here

    <div id = "slide-now-text">
       <span id="slide-click">Sign-in using email <i class="icon-chevron-sign-up"></i></span>
    </div>

        Email login here <- this part resides outside of the #front-page-slider wrapper until the user clicks on the above span

    </div>

</div>

コンテナー div #front-page-slide は幅と高さが固定され、オーバーフローは非表示になっています。

私が達成したいのは、ユーザーが #slide-click をクリックしたときに、内側の #slider-panel を 320px 上に移動することです。

最初のクリックでこのjqueryが正常に動作するようになりましたが、元の位置に戻すことはできません。

 jQuery(document).ready(function(){
    jQuery( "#slide-click" ).click(function() {
        jQuery( "#slider-panel" ).animate({"margin-top":"-320px"}, 1000);
        jQuery("#slide-now-text").html('<span id="slide-click-back"><i class="icon-chevron-sign-down"> Go back </i></span>');   

    });



    jQuery( "#slide-click-back" ).click(function() {
        jQuery( "#slider-panel" ).animate({"margin-top":"320px"}, 1000);
        jQuery("#slide-now-text").html('<span id="slide-click"><i class="icon-chevron-sign-down"> sign up </i></span>');    

    });
   });

ID、クラス、競合など、考えられるすべてを試しましたが、私がやろうとしている方法には根本的に愚かな何かがあるという結論に達しました。

どんな助けでも素晴らしいでしょう！

4

1 に答える 1

0

ここをクリックして使用してください -

jQuery( "html" ).on('click', '#slide-click', function() {
    jQuery( "#slider-panel" ).animate({"margin-top":"-320px"}, 1000);
    jQuery("#slide-now-text").html('<span id="slide-click-back"><i class="icon-chevron-sign-down"> Go back </i></span>');   

});

jQuery( "html" ).on('click', '#slide-click-back', function() {
    jQuery( "#slider-panel" ).animate({"margin-top":"320px"}, 1000);
    jQuery("#slide-now-text").html('<span id="slide-click"><i class="icon-chevron-sign-down"> sign up </i></span>');    

});

なぜクリック？#slide-click-backクリックすると#slide-click動的にロードされ、動的にロードされたコンテンツをクリックしたときにイベントが必要な場合は、クリック機能でjqueryを使用する必要があるためです。

于 2013-05-23T09:00:05.277 に答える