1

我正在使用滑动事件(和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() 的原因

4

2 回答 2

1

在隐藏之前缓存下一个:

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

jsFiddle

于 2013-07-09T12:54:11.513 回答
0

我找到的解决方案是

  1. 删除隐藏类
  2. 将高度容器 (#content2) 动态设置为视口高度的比例。
  3. #content2{溢出:隐藏}

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

$(this).toggle( "slide" );
$(this).next().toggle( "slide" );
于 2013-07-09T13:22:29.450 回答