jQuery对子级运行removeClass/addClass函数

$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(2)").removeClass("contracted contract");
    $(".drop-box:eq(2)").addClass("drop");
  });
});
$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(2)").removeClass("drop");
    $(".drop-box:eq(2)").addClass("contract");
  });
});

.drop-box {
  width: 300px;
  height: auto;
  background-color: red;
  border-radius: 20px 20px 0px 0px
}
.drop-box-title {} .drop-image-box {
  overflow: hidden;
}
img {
  width: 100%;
}
.image-box-text,
h2 {
  text-align: center;
}
.contracted {
  height: 0px
}
@-webkit-keyframes drop {
  0% {
    height: 0px;
  }
  100% {
    height: 300px;
  }
}
.drop {
  height: auto;
  -webkit-animation-name: drop;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: drop;
  animation-duration: 2s;
}
@-webkit-keyframes contract {
  0% {
    height: 300px;
  }
  100% {
    height: 0px;
  }
}
.contract {
  height: 0px;
  -webkit-animation-name: contract;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: contract;
  animation-duration: 2s;
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<body>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
</body>
</html>

嗨，我正在尝试使用addClass和removeclass在jQuery中创建一些扩展的图像框。（可能有一种更简单的方法，但我是新手。）

我正在使用类，因为会有很多相同的图像框，所以我试图使用：eq来选择每个类的第二个孩子，但我在哪里都找不到。

如果有人能帮我，我将不胜感激。

谢谢。

$(document).ready(function() {
  $(".drop-box").click(function() {
    $(".drop-box:eq(1)").removeClass("drop");
    $(".drop-box:eq(1)").addClass("contract");
  });
});

.drop-box {
  width: 300px;
  height: auto;
  background-color: red;
  border-radius: 20px 20px 0px 0px
}
.drop-box-title {} .drop-image-box {
  overflow: hidden;
}
img {
  width: 100%;
}
.image-box-text,
h2 {
  text-align: center;
}
.contracted {
  height: 0px
}
@-webkit-keyframes drop {
  0% {
    height: 0px;
  }
  100% {
    height: 300px;
  }
}
.drop {
  height: auto;
  -webkit-animation-name: drop;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: drop;
  animation-duration: 2s;
}
@-webkit-keyframes contract {
  0% {
    height: 300px;
  }
  100% {
    height: 0px;
  }
}
.contract {
  height: 0px;
  -webkit-animation-name: contract;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 2s;
  /* Chrome, Safari, Opera */
  animation-name: contract;
  animation-duration: 2s;
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<body>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
  <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
  
    <div class="drop-box">
    <div class="drop-box-title">
      <h2>Image Title</h2>
    </div>
    <div class="drop-image-box contracted">
      <img src="http://placehold.it/350x350" alt="...">
    </div>
    <div class="drop-box-description">
      <p class="image-box-text">A breif Description of the image</p>
    </div>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：