Question

我尝试构建这样的效果：单击.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（）中，它不起作用，那么问题是什么？

Answer 1

你可以试试这个：

$(this).closest('.labelElement').removeClass("s1");

Answer 2

您的点击正在冒充DOM层次结构，因此也会触发.labelElement上的click事件并重新添加刚刚删除的类。

使用e.stopPropagation（）来防止冒泡。

https://api.jquery.com/event.stopPropagation

或者看看这个问题的答案：

.parents().removeClass() not working

关于来自父元素的removeClass

2 个答案: