我正在建立一些网站,我想在http://www.strv.com上有一个菜单(在打开和关闭时具有过渡效果)。
我已经完成了如下代码:
<div class="menu">
<button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
<li><a href="#">Subitem3</a></li>
<li><a href="#">Subitem4</a></li>
</ul>
</div>
</div>
JSFiddle:https://jsfiddle.net/eztuhvhL/
(不在那里工作,也不知道为什么),但是对close没有过渡效果,我无法解决。
我也想在移动屏幕上的此菜单中添加“ Item1,Item2,Item3”,但我不知道该如何解决。
谢谢。
最佳答案
您的问题是您有两个带有ID汉堡包的按钮,因此jquery不知道您要哪个。如果您在控制台中查看类似chromes devtools的内容,则单击它时将看不到任何变化。解决的办法是摆脱汉堡包的初犯。这是我得到的:
http://codepen.io/Squeakasaur/pen/mWKzer
<div class="menu">
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Subitem1</a></li>
<li><a href="#">Subitem2</a></li>
<li><a href="#">Subitem3</a></li>
<li><a href="#">Subitem4</a></li>
</ul>
</div>
</div>
那应该解决您的问题。您也可以将第一个实例的ID更改为其他名称:P
关于javascript - 导航折叠和关闭,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43003586/