Question

我有以下内容：

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

当我跑步时，隐藏不会发生。如果我取消注释注释行并显式运行siblings().hide()，那么它可以工作，但将其链接到切换方法会失败。

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>

令我困惑的是我之前使用过这个：

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

它有效。如果我将原始函数中的代码更改为：

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

然后一切都很好。

我尝试将其分解为幻灯片，然后控制台记录此，此设置为调用div，因此不是这个被重新分配。

那么为什么幻灯片打破链条？

Answer 1

jQueryUI＆＃39; s toggle创建了一个围绕原始元素的包装器。由于包装器只包含一个元素，因此在原始元素上调用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.

链接兄弟姐妹（）。hide（）无法在jqueryui中工作

2 个答案: