Попытка создать разборное многоуровневое меню с помощью виджета Panel JQuery Mobile (v 1.4.5). Я добавил анимацию slideUp / Down, чтобы сделать открытие подменю более заметным.
<div data-role="page">
<div data-role="panel" id="mainmenu" role="navigation" data-display="overlay">
<ul data-role="listview" class="ui-listview-outer">
<li><a href="#">Home Page</a></li>
<li data-role="collapsible" data-inset="false">
<h3>LIST 1 OF 6</h3>
<ul data-role="listview" data-theme="b">
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
<!-- etc. -->
</ul>
</li>
<li data-role="collapsible" data-inset="false">
<h3>List 2 OF 6</h3>
<ul data-role="listview" data-theme="c">
<li role="menuitem"><a href="#">2.1</a></li>
<li role="menuitem"><a href="#">2.2</a></li>
<li role="menuitem"><a href="#">2.3</a></li>
<!-- etc. -->
</ul>
</li>
<li data-role="collapsible" data-inset="false">
<h3>List 3 OF 6</h3>
<ul data-role="listview">
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
<!-- etc. -->
</ul>
</li>
<li data-role="collapsible" data-inset="false">
<h3>LIST 4 OF 6</h3>
<ul data-role="listview">
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
<!-- etc. -->
</ul>
</li>
<li data-role="collapsible" data-inset="false">
<h3>LIST 5 of 6</h3>
<ul data-role="listview">
<li><a href="#">5.1</a></li>
<li><a href="#">5.2</a></li>
<li><a href="#">5.3</a></li>
<!-- etc. -->
</ul>
</li>
<li data-role="collapsible" data-inset="false">
<h3>LIST 6 OF 6</h3>
<ul data-role="listview">
<li><a href="#">6.1</a></li>
<li><a href="#">6.2</a></li>
<li><a href="#">6.3</a></li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
<div data-role="header" class="header">
<a href="#mainmenu" data-icon="bars" data-iconpos="notext">Menu</a><h1>This is the header
</h1>
</div>
<div data-role="content" class="content">
This is the content
<br>
<br>
<br>
<br>
<!-- <br>'s etc. to increase page length for illustrative purposes -->
</div>
<div data-role="footer" class="footer">
This is the footer
</div>
</div>
Проблема: когда высота меню превышает высоту div страницы (что происходит быстро, поскольку верхнее подменю довольно длинное), а затем еще одно подменю , расположенное ниже, расширяется / сворачивается, область просмотра переходы так, что нижняя часть страницы находится внизу области просмотра, толкая недавно открытое подменю под областью просмотра и, несомненно, вводит пользователя в заблуждение относительно того, что только что произошло.
В идеале, подменю, которое только что щелкнуло, остается в поле зрения, анимация slideDown видима, и пользователь понимает, что подменю открылось. JQuery, по-видимому, динамически изменяет высоту страницы в зависимости от высоты меню, что имеет смысл, но внезапное смещение области просмотра ... меньше.
Поведение сохраняется с или без анимации слайдов, включенной ниже:
$(document).ready(function () {
$(document).on("collapsibleexpand", ".ui-collapsible", function (event) {
var contentDiv = $(this).children(".ui-collapsible-content");
contentDiv.hide();
contentDiv.slideDown(300);
event.stopPropagation(); // don't bubble up
});
$(document).on("collapsiblecollapse", ".ui-collapsible", function (event) {
var contentDiv = $(this).children('.ui-collapsible-content');
contentDiv.slideUp(300);
event.stopPropagation(); // don't bubble up
});
});
Рабочая скрипка, чтобы показать проблему
Я далёк от того, чтобы быть экспертом по JQuery / JS / JQM, и вполне может быть, что я делаю здесь что-то, что не рекомендуется (например, я не видел много о вложенных списках в панели для навигации) , Если это так, я готов услышать об этом.