javascript - 使用 jQuery 移动元素

Question

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

有两个问题:

1. 展开时文本应移至蓝色 div，折叠时应移回红色
2. 文本完全消失，没有移动到另一个 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

查看更新后的 fiddle :http://jsfiddle.net/awden/3/

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

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

相反，您想将.red 的内容 附加到.blue，反之亦然。换句话说，你想要这样的东西:

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