在我们的移动网站中,我们使用汉堡式下拉菜单导航至移动主页上的不同部分。我们的问题是菜单不会在之后自动关闭。用户必须在之后单击关闭才能隐藏下拉菜单。
HTML
<div id="menuSlideIn">
<ul>
<li><a href="#item1">About</a></li>
<li><a href="#item2">Academics</a></li>
<li><a href="#item3">Cost</a></li>
<li><a href="#item4">Orientation</a></li>
<li><a href="#item5">Student Life</a></li>
</ul>
</div>
<div id="about">
<a name="item1></a>
<div class="inner">
<asp:ContentPlaceHolder ID="ContentPlaceHolder11" runat="server"></asp:ContentPlaceHolder>
<div class="toTop black"><a href="#"></a></div>
</div>
</div>
JavaScript
$('#menuSlideIn').css("bottom", function () { return (-1 * $('#menuSlideIn').height()); });
$("#menuSlideIn").toggle("slide");
$('#menuHamburger').click(function () {
$("#menuSlideIn").toggle("slide");
});
CSS
#menuHamburger{
float:left;
padding: 8px 5px;
}
#searchImg {
float:right;
padding: 8px 5px;
}
.menuText{
float:left;
font-size:24px;
color: #ffce00;
}
#menuSlideIn{
height: auto;
width: auto;
background: #000;
position:absolute;
z-index: 100000;
}
#menuSlideIn li{
padding: 5px 10px;
}
#menuSlideIn li a{
color: #fff;
}
最佳答案
您可以向#menuSlideIn 中的链接添加事件处理程序以关闭汉堡包菜单。
$('#menuSlideIn li a').click( function() {
$("#menuSlideIn").toggle("slide");
});
关于javascript - 在移动设备中进行#选择后,我需要关闭下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32527569/