jQuery / CSS：尝试在单击事件</div>中更改兄弟<div>的margin-top

Question

我有一个HTML结构如下

<div class="parent">
  <div id="child1">
    <p class="invisible">
         Lorem ipsum aequitatem etc.
    </p>
  </div>
  <div id="child2">
      Child 2
  </div>
  <div id="child3">
      Child 3
  </div>
</div>

我目前在jQuery中有一个事件监听器，它正在侦听第一个孩子的点击事件。然后，我按<p>切换toggleClass('.invisible')元素的可见性，删除已应用的display:none。

我试图同时更改<p>内容的默认行为，通过更改其他两个兄弟姐妹的margin-top来将兄弟div添加到父div容器的底部。但是，当我应用具有负margin-top的类时，它实际上并不会更改兄弟姐妹的上边距。

以下是我目前的方法及其缺点：

$('#child1').on('click', function(){
   $('#child1 p').toggleClass('invisible');

   //does not change margin-top as presumably it does not change
   //the margin-top value associated with the id
   $('#child2').toggleClass('new_margin_top');

   //changes magin-top but is awkward for obvious reasons after n >=2 iterations of the click event
   $('#child2').css('margin-top',' <arbitrary-number> px');
});

这是一个具有相同行为的JSFiddle，因此您可以看到发生了什么：