通過點擊另一個格來淡入/掉出div

我有一個div元素。通過點擊它，它會顯示用於登錄的其他div。登錄div包含另一個div，login-close，它會在點擊時隱藏登錄div。我正在努力與所需的jQuery。以下是我迄今爲止：通過點擊另一個格來淡入/掉出div

<html> 
    <div class="member"></div> 
    <div class="login"> 
     <div class="login-close"></div> 
    </div> 
</html>

.member { 
    width: 80px; 
    height: 67px; 
    float: right; 
    background-color: #4CA502; 
    background-image: url(../images/social-icon/dark/member.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.login { 
    width: 300px; 
    height: 400px; 
    background: #090; 
    margin: 0px; 
    padding: 0px; 
    display: none; 
    position: absolute; 
    right: 0; 
    top: 87px; 
} 
.login-close { 
    background: #093; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    top: -30px; 
    margin: 0; 
    padding: 0; 
}

$(document).ready(function() { 
    $(".member").click(function() { 
     $(this).next(".login").fadeIn(1000);   
    }); 
    $(".login-close").click(function() { 
     $(this).next(".login").fadeOut(1000); 
    }); 
});

來源

2015-04-08 snopin

關閉按鈕是登錄DIV的後代這樣.next('.login')將無法正常工作，而不是你可以使用.closest('.login')找到祖先.login元素

$(document).ready(function() { 
 
    $(".member").click(function() { 
 
    $(this).next(".login").fadeIn(1000); 
 

 
    }); 
 
    $(".login-close").click(function() { 
 
    $(this).closest(".login").fadeOut(1000); 
 
    //or use .parent() since these are direct parent-child elements 
 
    //$(this).parent().fadeOut(1000); 
 
    }); 
 
});

.member { 
 
    width: 80px; 
 
    height: 67px; 
 
    float: right; 
 
    background-color: #4CA502; 
 
    background-image: url(../images/social-icon/dark/member.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.login { 
 
    width: 300px; 
 
    height: 400px; 
 
    background: #090; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 87px; 
 
} 
 
.login-close { 
 
    background: #093; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 30px; 
 
    top: -30px; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="member"></div> 
 
<div class="login"> 
 
    <div class="login-close"></div> 
 
</div>

演示：Fiddle

來源

2015-04-08 09:27:17

簡直就是，不知道make.Thank你!! – snopin

$(document).ready(function() { 
    $(".member").click(function() { 
    $(this).next(".login").fadeIn(1000);   
    }); 
    $(".login-close").click(function() { 
    $(".login").fadeOut(1000); 
    }); 
});

來源

2015-04-08 10:00:31

請解釋你改變了什麼，爲什麼...只是錐不是答案 –

我的錯誤，腳本代碼是好的！不管怎麼說，還是要謝謝你！！ – snopin

高興地幫助你......如果你對答案感到滿意，你可以接受它 –

通過點擊另一個格來淡入/掉出div

回答

相關問題