javascript - 隐藏和显示具有相同子类的另一个 div 会破坏脚本

Question

我有一个登录表单，其中包含指向“忘记密码”的链接，单击该链接时，登录 div 使用 fadeOut() 隐藏，然后使用 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="display:none" 的位置更改为子 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>