Toggleclass不工作？

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