单击可折叠对象时，jQuery Mobile页面跳至顶部 [英] jQuery Mobile page jumping to top when a collapsible is clicked

问题描述

我有一个带有面板导航的jQuery Mobile页面.最后两个元素是可折叠的菜单项.展开或折叠这些内容会使页面跳至顶部，并且用户必须再次向下滚动才能选择显示的条目之一.

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.

我试图通过在可折叠div的click事件中执行.preventDefault()来抑制此行为，但页面仍跳至顶部.

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.

有人知道如何预防吗?

谢谢.

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

自定义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;
}

推荐答案

这似乎是一个未解决的错误:
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688

作为目前的原始修补程序，可以在引用jQuery Mobile源代码之后放置如下脚本:

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

这将覆盖小部件内部方法(请注意注释行)，而无需直接更改jQuery Mobile源代码(当从CDN加载框架时，这是不可能的). 这是一个实时示例.

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