jquery - csstoggleClass 无法正常工作

Question

祝大家有美好的一天

我想在单击其中一张图像时立即切换类别。单击后，我想向该 div 添加一个名为 expand 的类，以给它一些过渡效果。所以这是我的问题。首先点击确定。第二次单击，expand 类不会消失。这是我的一些文件。

任何帮助将不胜感激。谢谢。

index.html

<div class="box1">
  <div class="content">
    <img src="img/some.png" />
  </div>
</div>

一些.js

$(function () {
  $("img").on("click", function() {
    var box = $(this).first().parents().eq(1).attr("class");
    $("."+box).toggleClass("expand");
  });
});

一些.css

.box1 {
  width: 50%;
  height: 50%;
  float: left;
  position: relative;
  font-size: 2em;
}

div {
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 2s;
}

div.expand {
  width: 100%;
  height: 100%;
}

Answer 1

您的代码在连续点击时不起作用，因为您正在获取整个 class 属性，然后查找名为 $('.box1 Expand') 的元素，该元素不存在。相反，请在元素本身上使用 toggleClass，而不是构建类选择器:

$("img").on("click", function() {
    $(this).first().parents().eq(1).toggleClass("expand");
});

或者，您可以使用 closest() 稍微清理代码:

$("img").on("click", function() {
    $(this).closest('box1').toggleClass("expand");
});