单击可折叠对象时，jQuery Mobile 页面跳转到顶部 [英] jQuery Mobile page jumping to top when a collapsible is clicked
问题描述
我有一个带有面板导航的 jQuery Mobile 页面.最后两个元素是带有更多菜单项的可折叠元素.展开或折叠这些会导致页面跳转到顶部，用户必须再次向下滚动才能选择显示的条目之一.
我试图通过在可折叠 div 的点击事件中执行 .preventDefault() 来抑制这种行为，但页面仍然跳转到顶部.
有谁知道如何防止这种情况发生?
提前致谢.
我的 HTML:
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="overlay" data-position-fixed="true><ul class="ui-listview" id="main_nav" data-role="listview" data-theme="a" ><!-- 许多其他项目--><li class="custom-li" data-icon="carat-r" ><div data-role="collapsible" data-iconpos="right" class="custom-collapsible" data-theme="a"><h2>我的账户</h2><ul class="ui-listview mainNav" data-role="listview" data-theme="a" ><li id="nav_account" data-icon="carat-r"><a href="#" onclick="return ajax_content('settings/account');"data-rel="close">Account Verwalten</a><li id="nav_profile_edit" data-icon="carat-r"><a href="#" onclick="return ajax_content('settings/profile_edit');"data-rel="close">Profil Bearbeiten</a><li id="nav_profile_interview" data-icon="carat-r"><a href="#" onclick="return ajax_content('settings/profile_interview');"data-rel="close">Profil访谈bearbeiten</a><li id="nav_profile_pic" data-icon="carat-r"><a href="#" onclick="return ajax_content('settings/profile_pic');"data-rel="close">Profilbild hochladen</a><li class="custom-li" data-icon="carat-r" ><div data-role="collapsible" data-iconpos="right" class="custom-collapsible" data-theme="a"><h2>AGB/Impressum</h2><ul class="ui-listview mainNav" data-role="listview" data-theme="a" ><li id="nav_profile_edit" data-icon="carat-r"><a href="#" onclick="ajax_content('impressum')" data-rel="close">Impressum</a><li id="nav_profile_intervview" data-icon="carat-r"><a href="#" onclick="ajax_content('agb')" data-rel="close">AGB</a><li id="nav_profile_pic" data-icon="carat-r"><a href="#" onclick="ajax_content('datenschutz')" data-rel="close">Datenschutz</a>
自定义 CSS:
#main_nav .custom-li {填充:0！重要；边框宽度:0 ！重要；}#main_nav .custom-bottom-li {边框顶部宽度:0 ！重要；}#main_nav .custom-collapsible {边距顶部:-7px；底边距:-9px；边框右下角半径:0 ！重要；边界左下角半径:0 ！重要；边界右上角半径:0 ！重要；边框左上角半径:0 ！重要；边框宽度:0 ！重要；}#main_nav .ui-collapsible-content{边距顶部:-7px ！重要；margin-bottom: 7px !important;}这似乎是一个开放的错误:
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688
作为目前的原始修复，可以在引用 jQuery Mobile 源代码之后放置这样的脚本:
$(function() {$.mobile.panel.prototype._positionPanel = function() {var self = this,panelInnerHeight = self._panelInner.outerHeight(),展开 = panelInnerHeight >$.mobile.getScreenHeight();if ( 展开 || !self.options.positionFixed ) {如果(展开){self._unfixPanel();$.mobile.resetActivePageHeight( panelInnerHeight );}//window.scrollTo( 0, $.mobile.defaultHomeScroll );} 别的 {self._fixPanel();}};});这将覆盖小部件内部方法(注意注释行)，而无需直接更改 jQuery Mobile 源代码(从 CDN 加载框架时这是不可能的).
这是一个现场示例.
I have a jQuery Mobile page with a panel navigation. The last two elements are collapsibles with further menu items. Expanding or collapsing these causes the page to jump to the top and the user has to scroll down again to choose one of the revealed entries.
I tried to surpress this behaviour by executing .preventDefault() in the click event of the collapsible div, but the page still jumps to the top.
Does anyone know how to prevent this?
Thanks in advance.
My HTML:
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="overlay" data-position-fixed="true" >
<ul class="ui-listview" id="main_nav" data-role="listview" data-theme="a" >
<!-- lots of other items -->
<li class="custom-li" data-icon="carat-r" >
<div data-role="collapsible" data-iconpos="right" class="custom-collapsible" data-theme="a">
<h2>Mein Account</h2>
<ul class="ui-listview mainNav" data-role="listview" data-theme="a" >
<li id="nav_account" data-icon="carat-r">
<a href="#" onclick="return ajax_content('settings/account');" data-rel="close">Account Verwalten</a>
</li>
<li id="nav_profile_edit" data-icon="carat-r">
<a href="#" onclick="return ajax_content('settings/profile_edit');" data-rel="close">Profil bearbeiten</a>
</li>
<li id="nav_profile_interview" data-icon="carat-r">
<a href="#" onclick="return ajax_content('settings/profile_interview');" data-rel="close">Profil Interview bearbeiten</a>
</li>
<li id="nav_profile_pic" data-icon="carat-r">
<a href="#" onclick="return ajax_content('settings/profile_pic');" data-rel="close">Profilbild hochladen</a>
</li>
</ul>
</div>
</li>
<li class="custom-li" data-icon="carat-r" >
<div data-role="collapsible" data-iconpos="right" class="custom-collapsible" data-theme="a">
<h2>AGB / Impressum</h2>
<ul class="ui-listview mainNav" data-role="listview" data-theme="a" >
<li id="nav_profile_edit" data-icon="carat-r">
<a href="#" onclick="ajax_content('impressum')" data-rel="close">Impressum</a>
</li>
<li id="nav_profile_intervview" data-icon="carat-r">
<a href="#" onclick="ajax_content('agb')" data-rel="close">AGB</a>
</li>
<li id="nav_profile_pic" data-icon="carat-r">
<a href="#" onclick="ajax_content('datenschutz')" data-rel="close">Datenschutz</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
Custom CSS:
#main_nav .custom-li {
padding: 0 !important;
border-width:0 !important;
}
#main_nav .custom-bottom-li {
border-top-width: 0 !important;
}
#main_nav .custom-collapsible {
margin-top:-7px;
margin-bottom: -9px;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border-width:0 !important;
}
#main_nav .ui-collapsible-content{
margin-top: -7px !important;
margin-bottom: 7px !important;
}
This appears to be an open bug:
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688
As a raw fix for now, a script like this can be placed after the reference to jQuery Mobile source:
$(function() {
$.mobile.panel.prototype._positionPanel = function() {
var self = this,
panelInnerHeight = self._panelInner.outerHeight(),
expand = panelInnerHeight > $.mobile.getScreenHeight();
if ( expand || !self.options.positionFixed ) {
if ( expand ) {
self._unfixPanel();
$.mobile.resetActivePageHeight( panelInnerHeight );
}
//window.scrollTo( 0, $.mobile.defaultHomeScroll );
} else {
self._fixPanel();
}
};
});
This will override the widget internal method (note the commented line) without the need of changing jQuery Mobile source code directly (which is not possible when the framework is loaded from CDN).
Here's a live example.
这篇关于单击可折叠对象时，jQuery Mobile 页面跳转到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
