Bootstrap 2.3 Android移动中的可折叠菜单问题

Question

我已经研究了一段时间，但是找不到解决方案，也没有找到任何相关的问题，对不起，如果以前已经提出这个问题，那就很抱歉。

我正在使用Twitter Bootstrap 2.3开发一个网站，我在Android中使用可折叠菜单组件时遇到了问题（使用三星Galaxy s4和Chrome最新版本的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中。在内部监督办公室，问题不存在

Answer 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中。在内部监督办公室，问题不存在