Question

我有一个登录表单，其中包含指向忘记密码的链接，单击此按钮时，使用fadeOut（）隐藏登录div，然后使用fadeIn（）显示忘记密码div。

但是，如果我将忘记密码的子元素与隐藏的div中的同一个类一起使用，则忘记密码根本不显示。

隐藏登录并显示忘记密码的功能

function forgotPassword() {
  $('.login, .register, .or').fadeOut(500).promise().then(function() {
    $('.forgotpassword').fadeIn(500);
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box account login">
  <div class="content">
    <h3>Login</h3>

    <div id="errorLogin">
      <p id="errorLoginMsg"></p>
    </div>

    <label for="email2">
      Email
      <input name="email2" id="email2" placeholder="Email...">
    </label>
    <label for="pw3">
      Password
      <input name="pw3" id="pw3" type="password" placeholder="Password...">
    </label>

    <button id="submitLogin" disabled="true">Login</button>
    <a id="forgotPassword_btn" onClick="forgotPassword()">Forgot password? Click here</a>
  </div>

  <div class="bg blue"></div>
</div>

<div class="box account forgotpassword" style="display:none;">
  <div class="content">//Adding this class breaks the script
    <p>Forgot password</p>
  </div>

  <div class="bg blue"></div>
</div>

Answer 1

只需将 style =＆＃34; display：none＆＃34; 的位置更改为子div意味着它应该是这样的

<div class="box account forgotpassword"><div class="content" style="display:none;">//Adding this class breaks the script
<p>Forgot password</p></div><div class="bg blue"></div></div>

Answer 2

经过大量的搜索，结果证明是CSS由于某种原因没有给出将要显示的div的全部高度。

我想补充一点，你不应该使用onClick =“”，而应该使用eventListener，或者你可以使用jQuery的.click（）函数。

Answer 3

您可以将callback功能传递给.fadeIn()和.fadeOut()个功能。链接here。

例如：

function forgotPassword() {
    // fadeOut with callback
    $('.login').fadeOut(500, function(){
        // then...
        $('.forgotpassword').fadeIn(500);
    });
};

隐藏和显示具有相同子类的另一个div中断脚本

3 个答案: