Javascript Jquery mobile-动态更改数据转换

有了jquery mobile transition，我希望我的站点表现得像电梯一样。 我有一个垂直菜单：

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

初始状态：

• 菜单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，它会做一个滑动过渡（良好行为）

我不太清楚您在菜单上期望的过渡行为。我曾经遇到需要动态更改菜单上的

数据转换

。考虑这个菜单，这次是水平的：

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

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

---

祝您好运。

您正在菜单项div中查找活动项类，但在标记中，您将其放在菜单号span上。

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

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