Я пытаюсь создать типичный вложенный список для мобильных устройств, когда вы нажимаете на элемент, а другая страница или список скользит поперек. Я написал очень простой jQuery для этого, сделав список видимым справа от текущего, а затем сдвинув оба влево:
$(function(){
$('li').click( function() {
var body = document.getElementById('body');
$('#second_list').css({
top: body.scrollTop+'px',
display: 'block'
});
$('#first_list').animate( { left: '-100%' }, 1000, null, function() {
$(this).css({ display: 'none' });
} );
$('#second_list').animate( { left: '0%' }, 1000 );
return false;
} );
});
Использование scrollTop означает, что если прокрутить первую страницу вниз, вторая страница переместится и будет вверху. Проблема в том, что теперь есть пустое пространство над второй страницей. Могу ли я как-то удалить это? Может быть, прокрутив список и страницу обратно наверх после загрузки?
Я уверен, что это возможно, потому что Sencha Touch делает это. У кого-нибудь есть урезанный пример HTML / CSS / JS такого рода вещей в действии?