Jquery移动-动态更改数据转换

Question

使用jquery移动转换，我希望我的站点表现得像电梯一样。我有一个垂直菜单：

<a href="#">
    <div class="menu_item">
        <span class="menu_number">2</span>
    </div>
</a>
<a href="#">
    <div class="menu_item">
       <span class="menu_number">1</span>
    </div>
</a>
<a href="#">
   <div class="menu_item active_item">
        <span class="menu_number">0</span>
   </div>
</a>

我在每个页面上动态地设置数据转换属性：

$(document).bind("pagechange", function() {
var firstActive = false;
$('.menu_item').each(function( index ) {
    if(!$(this).hasClass('active_item') && firstActive == false)
        $(this).parent().attr('data-transition','slidedown');
    else if(!$(this).hasClass('active_item') && firstActive == true)
        $(this).parent().attr('data-transition','slideup');
    else if($(this).hasClass('active_item')){
        firstActive = true;
        $(this).parent().removeAttr('data-transition');
    }
});});

初始状态：

• 菜单2 =>数据-转换=“向下滑动”
• 菜单1 =>数据-转换=“向下滑动”
• 菜单0 =>无数据转换

如果我点击"1“菜单：

• 菜单2 =>数据-转换=“向下滑动”
• 菜单1 =>无数据转换
• 菜单0 =>数据-转换=“滑动”

然后，如果我点击"2“菜单：

• 菜单2 =>无数据转换
• 菜单1 =>数据-转换=“滑动”
• 菜单0 =>数据-转换=“滑动”

即使菜单1有数据转换=“滑动”，当我单击它时，它也会向下滑动(初始数据转换)。

我不明白这种行为。

PS:如果我点击菜单0，它会进行滑动转换(良好的行为)。

Answer 1

我不太清楚你在菜单上期待的过渡行为。有一次，我发现需要动态地更改菜单上的data-transition。考虑一下这个菜单，这次是水平菜单：

<div class="menu">
   <a href="#page1" data-transition="slide">First Page</a>
   <a href="#page2" data-transition="slide" class="current_link ui-btn-active">Second Page</a>
   <a href="#page3" data-transition="slide">Third Page</a>      
   <a href="#page4" data-transition="slide">Fourth Page</a>
</div>

我的要求是:如果当前页面是Second Page，当我返回到First Page (单击/点击菜单链接)时，滑动应该是向后滑动。我实现了这样的目标：

$( document ).on( "pagebeforeshow", function() {
 $('.current_link').prevAll().attr('data-direction', 'reverse');
});

我觉得这个解决方案的简单优雅可能会对您的情况有所帮助。祝你好运。