Question

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

我试图通过在可折叠div的click事件中执行.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" >
        <!-- 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

这似乎是一个开放的错误：
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(),
            expand = panelInnerHeight > $.mobile.getScreenHeight();

        if ( expand || !self.options.positionFixed ) {
            if ( expand ) {
                self._unfixPanel();
                $.mobile.resetActivePageHeight( panelInnerHeight );
            }
          //window.scrollTo( 0, $.mobile.defaultHomeScroll );
        } else {
            self._fixPanel();
        }
    };
});

这将覆盖widget内部方法（注意注释行），而无需直接更改jQuery Mobile源代码（当从CDN加载框架时，这是不可能的。）

这是一个live example。

Answer 2

一个建议在href中使用“javascript:void(0);”而不是“#”。你可以检查它是否有效。如果您的onclick由于某种原因因运行时错误而返回false而失败。这样可以省你。

Answer 3

请添加return false;作为每次onclick电话的最终回报。

例如：

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

最后，而不是做

return ajax_content('settings/profile_pic');

只需调用ajax_content而不返回，之后添加一个返回false，并在你的ajax_content块中移动你的逻辑（应该返回什么）。

单击可折叠时，jQuery Mobile页面会跳到顶部

3 个答案: