Jquery mobile - 动态更改数据转换答案

【问题标题】：Jquery mobile - Change dynamically data-transitionJquery mobile - 动态更改数据转换
【发布时间】：2014-02-07 13:39:59
【问题描述】：

通过 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>

我在每个页面上动态设置 data-transition 属性：

$(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 => data-transition="slidedown"
菜单 1 => data-transition="slidedown"
菜单 0 => 无数据转换

如果我点击“1”菜单：

菜单 2 => data-transition="slidedown"
菜单 1 => 无数据转换
菜单 0 => data-transition="slideup"

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

菜单 2 => 无数据转换
菜单 1 => data-transition="slideup"
菜单 0 => data-transition="slideup"

即使菜单 1 有 data-transition="slideup"，当我点击它时也会向下滑动（初始数据转换）

我不明白这种行为。

PS：如果我点击菜单 0，它会进行上滑过渡（良好的行为）

【问题讨论】：

你在 menu_item div 上寻找 active_item 类，但在标记中你把它放在 menu_number 跨度上。

标签： javascript jquery css jquery-mobile

【解决方案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');
});

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

【讨论】：