1

我有一个带有可扩展链接的侧边栏。当它们扩展超过某个点时，我想将一些文本从一个 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 的新手，所以欢迎对我的代码提出任何建议！

4

2 回答 2

3

看到这个更新的小提琴：http: //jsfiddle.net/awden/3/

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

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

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

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

于 2013-03-06T21:30:36.640 回答
1

我想你的意思是再次移动from<p>和back 。为此，只需添加到每个选择器，如下所示：.red.blue> p

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

和

$('.blue > p').appendTo($('.red'));
于 2013-03-06T21:31:08.960 回答