Toggleclass按鈕不工作？

Question

爲什麼我不能用按鈕切換框？我希望它做它目前的功能，但也切換框？

這裏是我的fiddle

我的代碼：

$(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

您的排除條件not(this)是不正確的。這裏this是.button元素而不是.timelineTile元素。

所以

$('.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'); 
});