Question

我有一个带有可扩展链接的侧边栏。当它们扩展到某一点时，我想将一些文本从一个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();
  });
});

以下是我jsfiddle的链接。

我真的是javascript的新手，所以对我的代码的任何建议都是最受欢迎的！

Answer 1

请参阅此更新的小提琴：http://jsfiddle.net/awden/3/

问题是您要将整个.red元素附加到.blue元素的内部

$('.red').appendTo($('.blue'))

相反，您希望将.red的内容附加到.blue，反之亦然。换句话说，你需要类似的东西：

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

Answer 2

我认为您希望将<p>从.red移至.blue并再次返回。要做到这一点，只需将> p添加到每个选择器，如下所示：

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

和

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

使用jQuery移动元素

2 个答案: