如何使用jquery ui在元素中滑动

Question

我正在使用滑动事件（和http://api.jqueryui.com/slide-effect/）来滑出内容。这很好用。但是，当前一个兄弟滑出时，我需要在下一个（'div'）滑动。我尝试过next（），nextAll（），nearest（）但似乎没有做我需要的。

这是函数

function swipeleftHandler(event){  
    $(this).toggle( "slide" );// div slides out to left

    // need to slide in next one here

}

HTML看起来像这样

<div id="content2" class="content tabcontent active" data-content="1">
<div id="orders_today" class="datagroup datagroup0"></div>
<div id="orders_last_30_days" class="datagroup datagroup1 hide">
</div>

滑动事件就像这样调用

$(document.body).on('swipeleft', '.datagroup' ,swipeleftHandler);

正确捕获滑动事件，并根据需要将第一个div滑向左侧。我需要下一个div来支持。容器中可能有多个元素具有相同的类（和未知的ID），所以这就是为什么我尝试使用next（）

Answer 1

在隐藏之前缓存下一个：

$("body").on("click", "div", function(){
   $next = $(this).next();
   $(this).toggle("slide");
   $next.toggle("slide");
});

jsFiddle

Answer 2

我发现的解决方案是

1. 删除隐藏类
2. 在视口高度上动态设置高度容器（#content2）。
3. ＃内容2 {溢出：隐藏}

然后在我的swiftlefthandler函数中，我使用了以下

$(this).toggle( "slide" );
$(this).next().toggle( "slide" );