2

祝大家好日子，

我想在单击其中一张图片后立即切换课程。单击后，我想为其添加一个div带有名称的类，expand以使其具有一点过渡效果。所以这是我的问题。首先点击，确定。第二次点击，下课expand。这是我的一些文件。

任何帮助将非常感激。谢谢。

索引.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%;
}
4

1 回答 1

4

您的代码在连续单击时不起作用，因为您正在获取整个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");
});
于 2013-11-13T14:32:11.990 回答