使用jQuery移动元素

我有一个带有可扩展链接的边栏。当它们扩展到某个点时，我想将一些文本从一个div移动到另一个div（红色到蓝色）。当我展开并折叠链接时，在某个时候，我打算移动的文本就消失了。使用jQuery移动元素

有两个问题：

文本应该移动到蓝格的时候我扩大，回冲，当我崩溃
文本完全消失，不会移动到其他分区。

这里是我的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新手，所以任何建议我的代码是最受欢迎的！

来源

2013-03-06 Niclas Nilsson

重读你的QI仍然很难猜测你有什么实际上是试图完成... – 2013-03-06 21:29:47

有人得了尽管我的不好解释。也许我明天为将来的访问者编辑它。但我得到了我的答案。感谢您指出。 :) – 2013-03-06 21:30:36

真的错过了功能，以upvote良好的编辑。谢谢MusikAnimal :) – 2013-03-06 21:50:22

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

的问题是，你是整个.red元素附加到.blue元素

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

相反的里面，你要追加内容的.red到.blue，反之亦然。换句话说，你想要的东西，如：

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

来源

2013-03-06 21:30:36 maxedison

哦，那么我毕竟是非常接近。非常感谢！ – 2013-03-06 21:32:42

熟悉Firebug或Chrome的开发者工具。这些可以让你看到HTML中实际发生了什么，并且会告诉你如何移动整个.red元素而不是其内容。从那里你可能已经弄清楚了。 – maxedison 2013-03-07 00:09:08

好的，我已经安装了萤火虫，但只真正用于纯CSS。所以尽量做到这一点。 :) – 2013-03-07 07:20:14

我觉得想你的意思做的是摆脱.red的<p>到.blue，然后再返回。要做到这一点，只需添加> p到每个选择，就像这样：

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

和

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

来源

2013-03-06 21:31:08

使用jQuery移动元素

回答

相关问题