隱藏和顯示具有相同子類別的另一個div中斷腳本

我有一個登錄表單，其中包含指向一個忘記密碼的鏈接，單擊登錄div時使用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>

來源

2017-02-13 Alexander Boman Skoug

您的代碼似乎很好地工作 - 因爲你可以從我加入到你的問題的摘要中看到。檢查您的工作代碼中的控制檯是否存在錯誤。我認爲還有另一塊代碼，甚至CSS，如果它是佈局問題，這是干擾預期的行爲 –

@RoryMcCrossan它在這裏工作，但不是在真實的網站上，如果我刪除它顯示類「內容」類這應該。這似乎是因爲我隱藏了一個帶有子類的div，即使將該子類添加到了fadeIn（）中，我也無法再次顯示該子類。腳本不會「破壞」（我的錯誤措辭），但由於「內容」類，它不會顯示「忘記密碼」-DIV。 –

在這種情況下，它絕對聽起來像一個CSS問題。檢查DOM檢查器中的元素，看看哪些樣式應用了'.content'類 –

只是改變風格=的地方「顯示：無」兒童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>

來源

2017-02-13 14:28:27

經過大量的搜索後，它竟然是CSS某種原因沒有給予將要展示的div的全部高度。

我想補充一點，你不應該使用onClick =「」，而應該使用eventListener或者如果你可以使用jQuery的.click（）函數。

來源

2017-02-13 15:35:39

您可以將callback函數傳遞給.fadeIn()和.fadeOut()函數。鏈接here。

例如：

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

來源

2017-02-13 18:25:34 ramabarca

隱藏和顯示具有相同子類別的另一個div中斷腳本

回答

相關問題