我已经研究了一段时间,无法找到解决方案,也没有任何相关的问题解决我的问题,很抱歉,如果之前已经问过这个问题.
我正在使用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中出现.在内部监督办公室,问题不存在
最佳答案 我找到了解决方案.这有点啰嗦.
这是我的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中出现.在内部监督办公室,问题不存在