CSS toggleClass не работает правильно

Question

Добрый день всем,

Я хочу, чтобы переключить классы, как только я нажимаю на одном из изображений. Как только я нажму, я хочу добавить класс к этому div с именем expand, чтобы придать ему небольшой эффект перехода. Итак, вот моя проблема. Сначала нажмите ОК. Второй клик, класс 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%; 
} 

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