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 回答