如何解决Bootstrap:切换两个导航栏并更改aria扩展
我有一对Bootstrap导航栏,一个主导航栏和一个辅助导航栏。一切看起来都很好。
如果进入折叠视图,则会看到汉堡按钮,然后单击它可以展开菜单,并且在视觉上它的行为完全符合我的期望。同样如预期的那样,aria-expanded
属性从false
变为true
。
但是,当我关闭菜单时,aria-expanded
属性仍然为true
。其他一切工作都很好,show
类可以按需来来去去,菜单可以毫无问题地折叠和展开。
除了Bootstrap JS软件包和jQuery外,我没有JavaScript,因此不应该有任何干扰。以下是我的HTML。我想知道我的切换器按钮是否需要特别放在某个内部或外部。
<div id="navbarWrapper" class="navbar-wrapper fixed-top">
<div class="container">
<a class="navbar-brand" href="/">
<img src="logo.png">
</a>
<div class="navs-wrapper">
<nav class="navbar navbar-expand-md primary-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse" aria-controls="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md secondary-nav">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
<li class="menu-item"><a href="#" class="nav-link">Link</a></li>
</ul>
</div>
</nav>
</div><!-- .navs-wrapper -->
</div><!-- .container -->
</div><!-- .navbar-wrapper -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。