Question

我有一个登录超链接。所以当我点击它时，会显示一个id = nd_login_form的登录表单。

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

所以问题是当文档准备就绪时，表单将无法正确显示，并且会在单击登录链接时显示。到现在一切都很好。但是在下次单击登录超链接时，表单不会隐藏或向上滑动。任何人都可以帮助我在这里找到错误。??

Answer 1

用这个

替换脚本

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

您的脚本中有两个document.ready函数。首先，您要显示表单使用slideDown（）类。Working Fiddle

Answer 2

只需将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

jquery slidetoggle没有隐藏

2 个答案: