토글 클래스 버튼이 작동하지 않습니까?

Question

버튼으로 상자를 전환 할 수없는 이유는 무엇입니까? 나는 그것이 현재하고있는 것을 할뿐만 아니라 상자를 토글하고 싶다. not(this)이 정확하지

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


}); 
    }); 

$(function timelinetiles() { 
$('.button').click(function (e) { 
    e.stopPropagation(); 
$('.timelineTile').not(this).removeClass('clicked'); 
$(this).siblings('.timelineTile').toggleClass('clicked'); 

    }); }); 

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

    }); 

Answer 1

귀하의 제외 조건 :

여기 내 fiddle

내 코드입니다. 여기 this은 .timelineTile 요소가 아닌 .button 요소입니다.

그래서

$('.button').click(function (e) { 
    e.stopPropagation(); 
    var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked'); 
    $('.timelineTile').not($timeline).removeClass('clicked'); 

}); 

데모 :

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

 

 
    }); 
 
}); 
 

 
$(function timelinetiles() { 
 
    $('.button').click(function (e) { 
 
     e.stopPropagation(); 
 
     var $timeline = $(this).siblings('.timelineTile').toggleClass('clicked'); 
 
     $('.timelineTile').not($timeline).removeClass('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; 
 
} 
 
.button { 
 
    height:50px; 
 
    width:150px; 
 
    background:Red; 
 
    color:white; 
 
    margin:0px 10px 10px 10px; 
 
} 
 
}

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

Answer 2

는 확인이 간단한

Js Fiddle

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

$('.button').click(function (e) { 
    e.stopPropagation(); 
    $(this).siblings('.timelineTile').toggleClass('clicked'); 
}); 

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