Question

我的css下拉菜单在桌面上工作得非常好。但在触摸屏手机和平板电脑中，当我滚动页面时，下拉菜单会自动关闭。它会自动折叠，无法用于导航。即使页面向上或向下滚动，如何强制我的下拉菜单保持打开状态？

我的代码是：

HTML：

<div id="nav_wrapper"> <!-- NAV WRAPPER STARTS -->

    <div id="menu_icon_wrapper">
    <div id="menu_icon"></div>
    </div>

    <div id="nav_bar"> <!-- NAV BAR STARTS -->

    <ul id="nav"> <!-- NAV STARTS -->
    <li><a href="providers">Providers</a>
        <ul>
            <li><a href="actrix.html">Actrix</a></li>
            <li><a href="digital-island.html">Digital Island</a></li>
            <li><a href="farmside.html">Farmside</a></li>
            <li><a href="flip.html">Flip</a></li>
            <li><a href="inspire.html">Inspire</a></li>
            <li><a href="maxnet.html">Maxnet</a></li>
            <li><a href="orcon.html">Orcon</a></li>
            <li><a href="slingshot.html">Slingshot</a></li>
            <li><a href="telecom.html">Telecom</a></li>
            <li><a href="telstraclear.html">TelstraClear</a></li>
            <li><a href="vodafone.html">Vodafone</a></li>
            <li><a href="woosh.html">Woosh</a></li>
            <li><a href="xnet.html">Xnet</a></li>
        </ul>
    </li>
    <li><a href="compare">Compare</a></li>
    <li><a href="reviews">Reviews</a></li>
    <li><a href="contact">Contact Us</a></li>
    </ul> <!-- NAV ENDS -->

    <div style="clear:both;"></div>

    </div> <!-- NAV BAR ENDS -->

</div> <!-- NAV WRAPPER ENDS -->

CSS：

#menu_icon_wrapper
{
    display:none; /* hide menu icon initially */
}

#menu_icon
{
    background-image:url('../images/menu-icon.png');
    background-repeat:no-repeat;
    width:45px;
    height:45px;
    position:absolute;
    top:-21px;
    right:-1px;
    cursor:pointer;
}

#nav_bar ul li a
{
    background-color:#F29E33;
    border-top:1px solid #dd7d06;
    display:block;
    text-decoration:none;
    padding:6px 12px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    outline:none;
    text-align:left;
}

#nav_bar ul li a:hover,
#nav_bar ul li a.active
{
    background-color:#dd7d06;
}

#nav_bar ul li ul li a
{
    text-indent:25px;
}

jQuery的：

/* toggle nav */
$("#menu_icon").on("click", function(){
    $("ul#nav").slideToggle();
    $(this).toggleClass("active");
});

Answer 1

我猜这是因为你正在触摸菜单以外滚动。因此，请保持焦点和/或悬停菜单。

CSS下拉菜单会在触摸设备中自动关闭

1 个答案: