Question

在我们的移动网站中，我们使用汉堡包下拉菜单导航到移动主页上的不同部分。我们的问题是菜单后不会自动关闭。用户必须在之后单击以使下拉隐藏。

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;
}

Answer 1

您可以在#menuSlideIn中为关闭汉堡菜单的链接添加事件处理程序。

$('#menuSlideIn li a').click( function() {
    $("#menuSlideIn").toggle("slide");
});

Answer 2

我有同样的问题，我点击任意一个导航项时手动关闭它（虽然我检查这应该只在用户使用移动浏览器时发生）

我需要在移动设备中选择＃选择后关闭菜单

2 个答案: