の連鎖兄弟（）非表示（）私は、次のしているjqueryui

Question

で働いていない：

$('.popoutlink').on('click', function() { 
    var box = $('#' + $(this).data('box')); 
    // box.siblings().hide(); 
    box.toggle("slide", { direction: "left" }, 500).siblings().hide(100); 
}); 

私は皮が起こらないことを実行します

。私がコメント行のコメントを外して明示的に siblings().hide()を実行するとうまくいきますが、トグル方法に連鎖させると失敗します。

$('#trainClick').click(function() { 
    $('#train').toggle(1000).siblings().hide(500); 
}); 

そして、それは働いています：

HTMLは私を混乱させているもの

<div class="col-md-6 bb"> 
     <div class="row"> 
      <div class="col-md-2"> 
       <div class="popoutlink" data-box="p1">1</div> 
       <div class="popoutlink" data-box="p2">2</div> 
       <div class="popoutlink" data-box="p3">3</div> 
       <div class="popoutlink" data-box="p4">4</div> 
       <div class="popoutlink" data-box="p5">5</div> 
      </div> 


      <div class="col-md-10 bb" style="height: 400px;"> 
       <div class="popout" id="p1">panel 1</div> 
       <div class="popout" id="p2"> 

       </div> 
       <div class="popout" id="p3">panel 3</div> 
       <div class="popout" id="p4">panel 4</div> 
       <div class="popout" id="p5"> 
       <div id="progressbar"></div> 
       <button id="regress">click me</button> 
       <button id="progress">click me</button> 
       </div> 
      </div> 
     </div> 
    </div> 

は私が前にこれを使用してきましたです。元の関数のコードを次のように変更した場合：

box.toggle(500).siblings().hide(100); 

すべてが正常です。それが再割り当てされているこのの質問はありませんので、

私はその後、 このをロギングコンソール、単にスライドにそれを打破しようとした

、およびこのは、呼び出し元のdivに設定されています。

なぜ、スライドがチェーンを壊しているのですか？この行が機能するために

Answer 1

jQueryUIのtoggleは、元の要素のラッパーを作成します。ラッパーには1つの要素しか含まれていないので、元の要素にsiblingsを呼び出すと（これでラッパーの内部にある）、空のコレクションが返されます。

その後、使用.parent()ラッパーを取得する、と.siblings()：

box.toggle("slide", { direction: "left" }, 500) 
    .parent(".ui-effects-wrapper") 
    .siblings() 
    .hide(100); 

注：このラッパーは効果ライブラリ内部の一部なので、何もそれ以降のバージョンに変更することを妨げないことに注意してください。これを行うための適切な、読み取り可能な方法はチェーンなしです。 .toggleの電話の前に兄弟姉妹のコレクションを入手する：

var sib = box.siblings(); 
box.toggle("slide", { direction: "left" }, 500); 
sib.hide(100); 

Answer 2

：

box.toggle("slide", { direction: "left" }, 500).siblings().hide(100); 

あなたはページに追加されるのjQuery-UIライブラリを持っている必要があります。スライドと方向のトグルメソッドは、jQueryでは使用できません。

Get a demo here.