토글 클래스가 작동하지 않습니까?

Question

'timelineTile'div를 열고 닫으려고합니다. 다른 사람이 열리면 닫고, 배경을 클릭하면 닫을 수 있습니다. 다른 사람이 클릭하면 배경을 얻을 수 있지만, div 자체를 클릭하면 div가 닫히는 ... 여기에 내 fiddle

내 코드;

$(function() { 
 
    $('.timelineTile').click(function (evt) { 
 
     evt.stopPropagation(); 
 
     $('.selected').children().removeClass('clicked'); 
 
     $(this).toggleClass('clicked'); 
 
    }); 
 

 

 
    $(document).click(function() { 
 
     $('.timelineTile').removeClass('clicked'); 
 
    }); 
 
});

.timelineTile.clicked{ 
 
    background:red; 
 
    width:500px; 
 
    height:300px; 
 
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s; 
 
    transition:height 1s, left 1s, transform 1s; 
 
} 
 

 
.selected { 
 
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s; 
 
    transition:height 1s, left 1s, transform 1s; 
 
} 
 

 

 
.timelineTile { 
 
    background:black; 
 
    color:white; 
 
    width:200px; 
 
    height:100px; 
 
    margin-bottom:20px; 
 
    -webkit-transition:height 1s, left 1s, -webkit-transform 1s; 
 
    transition:height 1s, left 1s, transform 1s; 
 
} 
 

 
.timelineTilehold { 
 
    background:pink; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="timelineTilehold"> 
 
    
 
    <li class="selected"><div class="timelineTile">hello 
 
    </div></li> 
 

 
<li class="selected"><div class="timelineTile">hello 
 
    </div></li> 
 

 
<li class="selected"><div class="timelineTile">hello 
 
    </div></li></ul>

Answer 1

사용 .not()은 그래서 당신은 클릭 요소에 클래스를 제거하지 마십시오

$('.timelineTile').click(function (evt) { 
    evt.stopPropagation(); 
    $('.selected').children().not(this).removeClass('clicked'); 

DEMO