Question

我有一个div元素。通过单击它，它会显示用于登录的其他div。登录div包含另一个div，login-close，它会在点击时隐藏登录div。我正在努力与所需的jQuery。以下是我到目前为止的情况：

<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);
    });
});

Answer 1

关闭按钮是登录div的后代，因此.next('.login')无法正常工作，您可以使用.closest('.login')查找祖先.login元素

＆＃13;

$(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);
  });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

演示：Fiddle

Answer 2

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

通过单击另一个div来淡入/淡出div

2 个答案: