点击可折叠文件时，jQuery移动页面跳到顶部

Question

我有一个带有面板导航的jQuery移动页面。最后两个元素是可折叠的，带有更多菜单项。展开或折叠这些选项会导致页面跳转到顶部，用户必须再次向下滚动以选择显示的条目之一。

我试图通过执行来抑制这种行为。preventDefault（）在可折叠div的click事件中，但页面仍跳到顶部。

有人知道如何防止这种情况吗？

提前感谢。

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

Answer 1

请添加返回false；作为每个onClick调用中的最终返回。

例如：

onclick="ajax_content('impressum'); return false;"

最后，与其做

return ajax_content('settings/profile_pic');

只需调用ajax_content而不返回，在后面添加一个返回false，并将您的逻辑（返回应该做什么）移动到ajax_content块内。

Answer 2

一个建议是使用“javascript:void（0）；”而不是href中的“\/code>”。你可以检查一下，这样行吗。如果onclick由于某种原因失败，则返回false，就像运行时出错一样。这将拯救你。

Answer 3

这似乎是一个开放的错误：
https://github.com/jquery/jquery-mobile/issues/7055
https://github.com/jquery/jquery-mobile/issues/6688

作为目前的原始修复，类似这样的脚本可以放在对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移动源代码（当框架从CDN加载时，这是不可能的）。

这里有一个活生生的例子。