Bootstrap 2.3 android 手机中的可折叠菜单问题

Posted 2023-03-31

【中文标题】Bootstrap 2.3 android 手机中的可折叠菜单问题

【英文标题】：Bootstrap 2.3 Collapsible menu issues in android mobile

【发布时间】：2013-11-13 15:31:21

【问题描述】：

我已经研究了一段时间，但找不到解决方案，也找不到与我的问题相关的任何问题，如果之前有人问过这个问题，很抱歉。

我正在使用 Twitter Bootstrap 2.3 开发一个网站，但我遇到了 android 中的可折叠菜单组件的问题（在 Chrome 最新版本上使用 Samsung Galaxy s4 和 android 4.2 进行了测试）。

当我第一次“展开”菜单时，组件按预期工作，但如果我折叠它，然后再次“展开”它，链接看起来像“隐藏”。我仍然可以触摸它们，并且链接按预期工作。但是什么都没有显示，好像它们是透明的什么的。

有人遇到过这样的问题吗？任何帮助将不胜感激。

我已经找到了解决方案。虽然有点粗糙。

这是我的 html 标记：

<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
    <ul id="headerNav" class="nav green">
        <li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
        <li><a class="headerLink" href="#">Cómo llegar</a></li>
        <li><a class="headerLink" href="/es/noticias">Noticias</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
            <ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
             </ul>
        </li>
        <li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
        <li><a class="headerLink" href="#">Contacto</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
            <ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
            </ul>
        </li>                    
    </ul>
</div>

这是对我有用的修复：

.nav-collapse  
    -webkit-transform: none !important; 
    z-index: 1 !important; 
 

此问题仅在使用 Chrome 的 Android 中存在。在ios上没有问题

【问题讨论】：

我以前遇到过，请查看此解决方案> ***.com/questions/13902734 供将来参考，这种类型的导航菜单称为响应式导航。这可能有助于未来的搜索。告诉我进展如何

【参考方案1】：

我已经找到了解决方案。这有点粗糙。

这是我的 html 标记：

<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;">
    <ul id="headerNav" class="nav green">
        <li class="active"><a class="headerLink" href="/es">El Pueblo</a></li>
        <li><a class="headerLink" href="#">Cómo llegar</a></li>
        <li><a class="headerLink" href="/es/noticias">Noticias</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a>
            <ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1">
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li>
                <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li>
             </ul>
        </li>
        <li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li>
        <li><a class="headerLink" href="#">Contacto</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a>
            <ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li>
            </ul>
        </li>                    
    </ul>
</div>

这是对我有用的修复：

.nav-collapse  
    -webkit-transform: none !important; 
    z-index: 1 !important; 
 

此问题仅在使用 Chrome 的 Android 中存在。在IOS上没有问题

【讨论】：

对导致他问题的原因进行一些解释会非常有帮助

我仍然不知道是什么原因造成的。我的猜测是这与 Bootstrap 和浏览器引擎本身有关，可能是 .nav-collapse 的某些行为。无论如何，似乎 -webkit-transfrom 是主要问题，在我看来，该规则“隐藏”了元素。剩下的就是 z-index 技巧了。