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 =＆gt;数据过渡= “了slideDown”
菜单1 =＆gt;数据过渡= “了slideDown”
菜单0 =＆gt;没有数据转换

如果我点击“1”菜单：

菜单2 =＆gt;数据过渡= “了slideDown”
菜单1 =＆gt;没有数据转换
菜单0 =＆gt;数据过渡= “效果基本show”

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

菜单2 =＆gt;没有数据转换
菜单1 =＆gt;数据过渡= “效果基本show”
菜单0 =＆gt;数据过渡= “效果基本show”

即使菜单1有data-transition =“slideup”，当我点击它时会进行滑动（初始数据转换）

我不明白这种行为。

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');
});

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

Jquery mobile - 动态更改数据转换

1 个答案: