2014-04-02 65 views
3

我有一个登录超链接。所以当我点击它时,会显示id = nd_login_form的登录表单。jquery slidetoggle不隐藏

<li class="active"><a href="#nd_login_form" ><?php _e('Login', 'ninety'); ?></a></li> 

这是登录链接。形式是:

<form action="<?php echo home_url(); ?>/?wcz" method="post" class="nd_form" id="nd_login_form" style="z-index:100;background:gainsboro;position:absolute;"><div class="nd_form_inner"> 

    <p><label for="nd_username"><?php _e('Username','ninety'); ?>:</label> <input type="text" class="text" name="log" id="nd_username" placeholder="<?php _e('Username', 'ninety'); ?>" /></p> 
    <p><label for="nd_password"><?php _e('Password','ninety'); ?>:</label> <input type="password" class="text" name="pwd" id="nd_password" placeholder="<?php _e('Password','ninety'); ?>" /></p> 

<input type="submit" class="button" value="<?php _e('Login &rarr;','ninety'); ?>" /> 
     <input name="nd_login" type="hidden" value="true" /> 
       <input name="redirect_to" type="hidden" id="redirect_to" value="<?php echo nd_login_current_url(); ?>" /> 
    </p> 
</div></form> 

我使用的jQuery脚本是:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script> 
     (function ($) { 
     $(document).ready(function() { 
      $("#nd_login_form").slideUp(); 
     $(".active").click(function() { 
     $("#nd_login_form").slideToggle("fast"); 
     }); 
    }); 
    })(jQuery); 
     </script> 

所以,问题是,当文档准备好第一形式将无法正确显示,它会显示在点击登录链接。直到现在一切都很好。但在下一次单击登录超链接时,表单不会隐藏或滑动。任何人都可以帮助我在这里找到错误。

+0

看起来不错http://jsfiddle.net/arunpjohny/Ld8SN/1/ –

+1

首先删除自己的EXE函数,当文档准备就绪时你不需要这样做......所以在文档准备好之前试图调用函数,... http://stackoverflow.com/问题/ 6027337 /文件就绪,称为内部的外部功能 – jycr753

+0

它工作正常... http://jsfiddle.net/Ld8SN/3/ – jycr753

回答

1

与此

$(document).ready(function() { 
    $("#nd_login_form").slideDown(); 
    $(".active").on('click',function() { 
     $("#nd_login_form").slideToggle("fast"); 
    }); 
}); 

更换的脚本,你必须在脚本2种docuent.ready功能。起初你想用slideDown()类来显示表单。 Working Fiddle

+0

请正确调整表单代码。我刚刚更改了JQuery代码 – chandu

0

只需添加display:none到窗体风格

<form action="<?php echo home_url(); ?>/?wcz" method="post" 
    class="nd_form" 
    id="nd_login_form" 
    style="z-index:100;background:gainsboro;position:absolute;display:none"> 

和jQuery:

$(document).ready(function() { 

    $(".active").on('click',function() { 
     $("#nd_login_form").slideToggle("fast"); 
    }); 
}); 

WORKING DEMO