Я пытаюсь создать такой эффект следующим образом: нажмите.labelElment, чтобы изменить размер itselvse, и выберите другой размер блока или a.close для восстановления.labelElment.
Посмотрите html:
<div id="labelGroup">
<div class="labelElement c1">
<div class="panel">
<span class="avatar"></span>
<ul class="labelGroup">
<li class="l1">Label 1</li>
<li class="l2">Label 2</li>
<li class="l3">Label 3</li>
</ul>
</div>
<div class="info">
<ul>
<li>Information</li>
<li><a href="###" class="close">close</a></li>
</ul>
</div>
</div>
<div class="labelElement c2">Block</div>
</div>
И код jquery:
$('#labelGroup').delegate( '.labelElement', 'click', function(){
$('.labelElement').removeClass('s1')
$(this).addClass('s1');
$('#labelGroup').isotope('reLayout');
});
$('.close').click( function(e){
$(this).parents(".labelElement").removeClass("s1");
});
в.delegat(), removeClass работает хорошо, но в.click() это не работает, так что проблема?
Ваш клик пузырится по иерархии DOM, тем самым также инициируя событие click на.labelElement и повторно добавляя только что удаленный класс.
Используйте e.stopPropagation(), чтобы предотвратить пузырение.
https://api.jquery.com/event.stopPropagation
Или посмотрите ответ на этот вопрос:
Вы можете попробовать следующее:
$(this).closest('.labelElement').removeClass("s1");