根据单击时的元素高度添加和删除类

Question

我正在尝试添加和删除一个类到两个div（＃col-left和＃col-right），具体取决于它们在按下标签按钮时动态变化的高度（它们位于切换框中）。 / p>

这是我到目前为止所做的：

<script type="text/javascript">

$('.btn').click(function () {

   var colLeftHeight = $("#col-left").height();
   var colRightHeight = $("#col-right").height();


  if (colLeftHeight > colRightHeight) {
     $("#col-left").addClass('border-right');
     $("#col-right").removeClass('border-left');
  }
  if (colRightHeight > colLeftHeight) {
     $("#col-right").addClass('border-left');
     $("#col-left").removeClass('border-right');
  }  
  });

</script>

它可以工作，但只有在第二次单击按钮时才能正确添加/删除类。我不确定我错过了什么不会触发第一次点击。非常感谢！

编辑：

这是一个工作版本： http://jsfiddle.net/kfj61bq6/

特别注意当您单击“代码”按钮时。在第一次单击时，边框不会延伸（也就是未添加类），但第二次单击它时，它会被添加并且边框会延伸。单击左侧的“默认”和右侧的“代码”也可以执行此操作。第二次单击“默认”会正确添加类。