单击可折叠项时 jQuery Mobile 页面跳转到顶部答案

【问题标题】：jQuery Mobile page jumping to top when a collapsible is clicked单击可折叠项时 jQuery Mobile 页面跳转到顶部
【发布时间】：2014-02-11 10:10:04
【问题描述】：

我有一个带有面板导航的 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" >
        <!-- 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;
}

【问题讨论】：

能看到ajax_content()的源码吗？
我认为您的问题在于您的 onclick ajax 返回和您的 href=#"。当您单击链接时，会调用 ajax_content，然后调用 href 值，因为 onclick 不会返回 false。所以你的#anchor被调用，它滚动到顶部。为了帮助更多，我可以有你的ajax_content源代码吗？
OP 说问题发生在展开/折叠时。这里的每个人都专注于列表视图中的锚点。为什么它们与真正负责展开/折叠操作的可折叠标题有关？
@Demnogonis 桌面浏览器不会出现此问题。您在哪个移动平台上进行测试？
@Omar 你看到我的回答了吗？问题是here，看看expand这个变量。

标签： jquery jquery-mobile

【解决方案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();
        }
    };
});

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

这是live example。

【讨论】：

请注意 comment 由 jQM 团队之一。另请注意，expand 不是 collapsibleexpand 事件。
我已经看过了，但并没有让我很信服，因为我相信_positionPanel实际上必须被称为“在这种情况下”，至少为了“重置活动”页面高度”。但是，这些问题更多地涉及 github 以进行最终修复。最后，我一点也不会将expand 与collapsibleexpand 混淆。
内面板高度超过屏幕高度导致的问题。它调整高度并滚动到面板顶部（0），以免页面随面板滚动。
好的，但在这里我实际上并没有为解决 jqm 错误做出贡献。使用 github。
在这种情况下，我们打开面板后滚动添加到页面中，如果我的页面已经向下滚动，然后我点击菜单按钮怎么办？在我的应用程序中，当我到达页面底部后单击菜单按钮后，它会将页面滚动到顶部。

【解决方案2】：

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

【讨论】：

我建议在每次调用 onclick 后添加 return false。我不知道 js:void(0)。谢谢你的伎俩。
@franchez 您的建议也是正确的，但有时如果您的 onclick 在运行时创建任何错误，它不会返回 false，那么它会产生问题。可以用这个保存。
这不是ajax_content() 调用的问题。当我展开或折叠包含这些链接的collapsible时，页面会跳转。当您在手机上转到 demos.jquerymobile.com/1.4.0 时，您可以观察到相同的行为，向下滚动一点并在其面板中展开其中一个可折叠项（例如表格小部件）。但是我注意到 JQM 为可折叠组件呈现了更多代码（pastebin.com/iApwWR02 a href='#'，这似乎是跳跃的原因。

【解决方案3】：

请加return false;作为每个 onclick 调用的最终返回。

例如：

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

最后，而不是做

return ajax_content('settings/profile_pic');

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

【讨论】：

这不是ajax_content() 调用的问题。当我展开或折叠包含这些链接的collapsible时，页面会跳转。当您在手机上转到 demos.jquerymobile.com/1.4.0 时，您可以观察到相同的行为，向下滚动一点并在其面板中展开其中一个可折叠项（例如表格小部件）。但是我注意到 JQM 为可折叠组件呈现了更多代码（pastebin.com/iApwWR02 a href='#'，这似乎是跳跃的原因。