jquery - 如何使用 jquery ui 滑入元素

Question

我正在使用滑动事件（和http://api.jqueryui.com/slide-effect/）来滑出内容。这工作正常。但是，当前一个兄弟滑出时，我需要滑入下一个（'div'）。我已经尝试过 next()、nextAll()、closest()，但似乎没有一个能满足我的要求。

这是功能

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. #content2{溢出：隐藏}

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

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