0

当在移动设备上查看时，我的网站有一个非常基本的菜单。它在所有浏览器中的功能完全符合预期。就像我说的，它适用于所有浏览器。它切换打开并切换关闭 div。问题是，在默认的 Android 浏览器中，当您第一次打开菜单时，它会向左移动并在菜单右侧露出很大的空隙。就像菜单的宽度正在缩小一样。如果我关闭并重新打开菜单，菜单将具有应有的 100% 宽度。它不会在 Firefox Android 浏览器中执行此操作。只是默认浏览器。除了宽度变小了其他都还好

菜单有时会以某种方式挂起。当您关闭与切换关联的菜单容器时，容器内的东西会“悬挂”在屏幕上。“屏幕上会留下一些 div。这可能与 slideToggle 相关吗？如果我只是简单地它会消失吗？用过切换？

这是我的js

        $(document).ready(function(){

                $("#mobilemenu").hide();
                $("#mobilemenu-drop").show();

            $('#mobilemenu-drop').click(function(){
            $("#mobilemenu").slideToggle();
            return false;
            });

        });

        $(document).ready(function(){

                $("#cats").hide();
                $(".show_cats").show();

            $('#mobilemenu-catdrop').click(function(){
            $("#cats").slideToggle();
            return false;
            });

        });

这是我的html

    <header>
        <h1>title</h1>

    <span class="right">
        <div id="mobilemenu-drop">
            click
        </div>
    </span>
</header>

<div id="mobilemenu">
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <div id="mobilemenu-catdrop">
        <span>Second drop</span>
    </div>

    <div id="cats">cats
        drop content
    </div>
</div>

菜单容器的 css 是这个

#mobilemenu {
    width: 100%;
    background: #2e97de;
    border-top: #8dc8f2 1px solid;
}]
4

1 回答 1

0

我也遇到过这个问题。

我解决它的方法（到目前为止一直有效）是将宽度设置为@ 102%，然后打开overflow-x:hidden;

这会将其从右侧扩展（因为默认情况下浏览器从左到右工作），但如果它从左侧扩展，您可能需要设置 margin-left:0px; 甚至-1px；

于 2013-08-31T02:51:54.853 回答