Javascript 使用jQuery移动元素

我有一个带有可扩展链接的侧边栏。当它们展开超过某个点时，我想将一些文本从一个div移动到另一个div，从红色到蓝色。当我展开和折叠链接时，在某个时刻，我计划移动的文本就消失了

有两个问题：

展开时文本应移到蓝色div，折叠时文本应移回红色 文本将完全消失，而不会移动到另一个div。 这是我的html：

<div id="sidebar">
  <div>
    <a href="#" class="cal-title">Test 1</a>
    <p class="cal-desc">Lorem ipsum</p>
  </div>
  <div>
    <a href="#" class="cal-title">Test 2</a>
    <p class="cal-desc">Lorem ipsum</p>
  </div>
  <div>
    <a href="#" class="cal-title">Test 3</a>
    <p class="cal-desc">Lorem ipsum</p>
  </div>
</div>

<div class="red">
    <p>Just some random text</p>
</div>

<div class="blue">
</div>

以下是jQuery/js代码：

$(document).ready(function() {  
    var isExtended = false;
    function placeTiles() {
        // When to move content from .red to .blue
        if ($('#sidebar').height() > 150 && isExtended == false) {
            $('.red').appendTo($('.blue'));
            isExtended = true;
        // When to move content from .red to .blue
        } else if ($('#sidebar').height() <= 150 && isExtended == true) {
            $('.blue').appendTo($('.red'));
            isExtended = false;
        }
    }

  $('.cal-desc').hide();
  // Check how thing are on init  
  placeTiles();

  $('.cal-title').click(function() {
    $(this).siblings('.cal-desc').toggle();
    placeTiles();
  });
});

这里有一个链接到我的

我真的是一个javascript新手，所以欢迎对我的代码提出任何建议

查看此更新的小提琴：

问题是您正在将整个.red元素追加到.blue元素的内部

$'.red'。附加到$'.blue'

相反，您希望将.red的内容附加到.blue，反之亦然。换言之，您需要的是：

$'.red>p'.appendTo$'.blue'

请参阅此更新的小提琴：

问题是您正在将整个.red元素追加到.blue元素的内部

$'.red'。附加到$'.blue'

相反，您希望将.red的内容附加到.blue，反之亦然。换言之，您需要的是：

---

$'.red>p'.appendTo$'.blue'

我想你的意思是将从.red移到.blue，然后再移回来。为此，只需向每个选择器添加>p，如下所示：

$('.red > p').appendTo($('.blue'));

及

---

我想你的意思是将从.red移到.blue，然后再移回来。为此，只需向每个选择器添加>p，如下所示：

$('.red > p').appendTo($('.blue'));

及

---

重读你的问题，我仍然很难猜到你到底想做什么……尽管我解释得不好，但还是有人得到了答案。也许明天我会为未来的访客编辑它。但我得到了我的答案。谢谢你指出这一点真的错过了为好的编辑投票的功能。谢谢MusikAnimal：重读你的问题，我仍然很难猜到你到底想完成什么…尽管我解释得不好，但还是有人得到了。也许明天我会为未来的访客编辑它。但我得到了我的答案。谢谢你指出这一点真的错过了为好的编辑投票的功能。感谢MusikAnimal：熟悉Firebug或Chrome的开发工具。这些将让您看到HTML中实际发生的情况，并向您展示如何移动整个.red元素，而不仅仅是它的内容。从那里你可能已经能够弄明白了。好吧，我已经安装了firebug，但它只用于纯css。所以试着去做吧熟悉Firebug或Chrome的开发工具。这些将让您看到HTML中实际发生的情况，并向您展示如何移动整个.red元素，而不仅仅是它的内容。从那里你可能已经能够弄明白了。好吧，我已经安装了firebug，但它只用于纯css。所以试着去做吧