2

全てにおいて良い日、

画像をクリックするとすぐにクラスを切り替えたい。クリックしたら、それにdiv名前expandを付けてクラスを追加して、小さなトランジション効果を与えたいと思います。ここに私の問題があります。最初のクリック、OK。2 回目のクリックでは、クラスexpandは終了しません。これが私のファイルの一部です。

どんな助けでも大歓迎です。ありがとう。

index.html

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

some.js

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

some.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 に答える