1

拡張可能なリンクのあるサイドバーがあります。それらが特定のポイントを超えて拡張するとき、私はいくつかのテキストをあるdivから別のdivに移動したいと思います（赤から青）。リンクを展開したり折りたたんだりすると、ある時点で、移動しようとしていたテキストが消えてしまいます。

2つの問題があります：

  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'))

代わりに、の内容を.redに追加する必要があります.blue。その逆も同様です。言い換えれば、次のようなものが必要です。

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

于 2013-03-06T21:30:36.640 に答える
1

私はあなたがしたいのは、からとに戻って移動<p>することだと思います。これを行うには、次のように各セレクターに追加します。.red.blue> p

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

と

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