JQuery mobile - Изменение динамического перехода данных

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 => данных- переход = "slidedown"

• Меню 1 => data-transition = "slidedown "

• Меню 0 => нет данных переход

Если я нажимаю на "меню":

• Меню 2 => данные переходов =" 1 slidedown»
• Меню 1 => нет передачи данных
• Меню 0 => data-transition = "slideup"

не

Тогда, если я нажимаю на меню "2":

• Меню 2 => нет данных переход
• меню 1 => данные переходов = "slideup"
• Меню 0 => данных- переход = «slideup»

Даже если меню 1 имеет дата-переход = «slideup», когда я нажимаю он делает slidedown (исходные данные-переход)

Я не понимаю такого поведения.

PS: если я нажимаю на меню 0, это делает slideup переход (хорошее поведение)

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

Я чувствую, что простая элегантность этого решения может помочь вам в вашей ситуации. Удачи.