引导导航栏在移动设备上无法正常工作



>第一次在这里写。

在移动设备上访问网站时,我的引导程序导航有一个问题。

我有导航,我喜欢"画廊",然后单击"图片"和"视频"作为"画廊"的子菜单。问题是当我单击MENU时,它会打开它应该的方式,但是当我单击"图库"时,"图片"和"视频"开始显示,但随后整个菜单折叠/关闭。我什至无法单击"图片"或"视频"。

我想要这样的行为:我点击菜单 - 它展开 - 我点击"图库" - 它展开 - 我点击"视频"然后转到视频页面。 当前的行为是这样的:我点击菜单 - 它展开 - 我点击"图库" - 整个菜单折叠/关闭。

导航(桌面(的屏幕截图,因为它工作正常 - http://prntscr.com/fugrrv

导航(移动(的屏幕截图,因为它工作正常 - http://prntscr.com/fugs3j

我会发布我的代码,所以如果你发现问题,请告诉我,我对这个"小事"失去了所有的神经。 现在代码有点混乱,因为我已经在尝试我找到的任何解决方案......但没有成功。

我有jquery.min.js/css,bootstrap.min.js/css链接在头和页脚

对不起,英语不好..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="mainNav" class="navbar navbar-inverse navbar-fixed-top"">
<!-- navbar inverse - container fluid start -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="true">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">OPG Dumančić</a><span class="navbar-brand" id="brand-bull">&bull;</span></a><span class="navbar-brand" id="page-title"><?php echo "$pagetitle"; ?></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="<?=(isset($menuid) && $menuid=='index')?'active':'';?>">
<a href="/">Početna</a>
</li>
<li class="<?=(isset($menuid) && $menuid=='onama')?'active':'';?>">
<a href="onama">O nama</a>
</li>
<li class="nav-dropdown nav-link">
<a href="#" class="nav-link nav-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Galerija &equiv;</a>
<ul class="navbar-inverse dropdown-menu nav-dropdown">
<li class="<?=(isset($menuid) && $menuid=='galerija-slika')?'active':'';?>"><a id="aslike" href="galerija-slika">&rArr; Slike</a></li>
<li class="<?=(isset($menuid) && $menuid=='galerija-videa')?'active':'';?>"><a id="avideo" href="galerija-videa">&rArr; Video</a></li>
</ul>
</li>
<li class="<?=(isset($menuid) && $menuid=='kontact')?'active':'';?>">
<a href="kontakt">Kontakt</a>
</li>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

你的代码中有一些小错误;一个额外的引号,一个额外的结束锚点(</a>(和一个被省略的结束无序列表。 更正这些问题并运行代码似乎会导致引导程序按预期运行:

https://www.bootply.com/LnbYC1Ib1S

<nav id="mainNav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="true">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">OPG Dumančić</a><span class="navbar-brand" id="brand-bull">&bull;</span><span class="navbar-brand" id="page-title"><?php echo "$pagetitle"; ?></span>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="<?=(isset($menuid) && $menuid=='index')?'active':'';?>"><a href="/">Početna</a></li>
<li class="<?=(isset($menuid) && $menuid=='onama')?'active':'';?>"><a href="onama">O nama</a></li>
<li class="nav-dropdown nav-link">
<a href="#" class="nav-link nav-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Galerija &equiv;</a>
<ul class="navbar-inverse dropdown-menu nav-dropdown">
<li class="<?=(isset($menuid) && $menuid=='galerija-slika')?'active':'';?>"><a id="aslike" href="galerija-slika">&rArr; Slike</a></li>
<li class="<?=(isset($menuid) && $menuid=='galerija-videa')?'active':'';?>"><a id="avideo" href="galerija-videa">&rArr; Video</a></li>
</ul>
</li>
<li class="<?=(isset($menuid) && $menuid=='kontact')?'active':'';?>"><a href="kontakt">Kontakt</a></li>
</ul>
</div>
</div>

我想它与JS有关,但我已经设法绕过了这个问题(目前(。

不知何故,当我从上方带有 ID 为"导航栏折叠"的div 中删除类"导航栏折叠"时,在移动设备上一切正常,但每个导航链接在 PC 上都会消失(仍然显示品牌(。所以我使用媒体查询将 #navbar 折叠显示为块,直到它缩小到"菜单"按钮(不能只显示:块,然后它总是打开 o 移动(,现在似乎有效。感谢您的回复罗伯特C!

相关内容

  • 没有找到相关文章

最新更新