Css 引导导航栏下拉列表在iphone上不起作用
我正在mean.js框架中使用“bootstrap”:“~3.3.4”。在桌面上单击下拉图标时,导航栏下拉菜单在打开和保持不变时没有任何问题。但在推送到暂存服务器后,单击iphone和三星galaxy浏览器上的图标不再打开下拉菜单,或者有时会打开,但不会保持打开状态 代码如下:Css 引导导航栏下拉列表在iphone上不起作用,css,angularjs,twitter-bootstrap,meanjs,Css,Angularjs,Twitter Bootstrap,Meanjs,我正在mean.js框架中使用“bootstrap”:“~3.3.4”。在桌面上单击下拉图标时,导航栏下拉菜单在打开和保持不变时没有任何问题。但在推送到暂存服务器后,单击iphone和三星galaxy浏览器上的图标不再打开下拉菜单,或者有时会打开,但不会保持打开状态 代码如下: <div class="landing-page-header"> <div class="navbar-header" > <button class="navba
<div class="landing-page-header">
<div class="navbar-header" >
<button class="navbar-toggle mytoggle" type="button" data-ng-click="toggleCollapsibleMenu()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a data-ui-sref="home" class="navbar-brand">
<img class="header-logo" ng-src="modules/core/img/home/myimg.png" height="">
</a>
</div>
<nav class="collapse navbar-collapse" data-ng-show="!authentication.user" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav navbar-right landing-page-nav" data-ng-hide="authentication.user">
<li class="text-center" data-ng-repeat="item in menu.items | orderBy: 'position'"
data-ng-if="item.roles.indexOf('guest') !== -1"
ng-switch="item.type"
data-ng-class="{active: $state.includes(item.state)}"
class="{{item.class}}"
target="{{item.target}}"
dropdown="item.type === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle">
<span data-ng-bind="item.title"></span>
<b class="caret"></b>
</a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" data-ui-sref-active="active">
<a data-ui-sref="{{subitem.state}}" data-ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default data-ui-sref="{{item.state}}" data-ng-bind="item.title"></a>
</li>
<li class="divider-vertical"></li>
<li class="text-center " data-ui-sref-active="active">
<a data-ui-sref="authentication.signin" target="_self">SIGN IN</a>
</li>
</ul>
</nav>
</div>
我在这个网站上看到了其他答案,并用谷歌搜索了这个问题。我遇到的一个答案建议使用or输入代替按钮,但我仍然面临同样的问题
浏览器中发生的情况是,在代码被推送到暂存服务器后,navbar会立即单击按钮(hamburger)(在galaxy和iphone上),但一旦单击菜单项,当您返回并再次单击hamburger菜单时,导航栏在开始渲染、停止并立即返回时会表现得很奇怪
有人知道吗?我自己也找到了解决办法。对于小于480px的屏幕,我只需将下拉列表的位置设置为“静态”
@media (max-width: 480px) {
.landing-page-header ul{
position: static;
width:100%;
}
}
你应该在你的问题中添加一些CSS。这可能是按钮的z索引问题。我也遇到过类似的问题。我已经编辑了这个问题。您现在可以看到代码了。
@media (max-width: 480px) {
.landing-page-header ul{
position: static;
width:100%;
}
}