简体   繁体   中英

I need drop down menu to close after # selection in mobile

In our mobile site we are using a hamburger drop-down menu to navigate to different sections on the mobile home page. Our problem is that the menu does not automatically close afterwards. The user has to click off afterwards to make the drop down hide.

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

You could add an event handler to the links in #menuSlideIn that closes the hamburger menu.

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

我有同样的问题,当我单击任何导航项时,我会手动将其关闭(尽管我检查这仅在用户使用移动浏览器时发生)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM