Jquery slideToggle（）在触摸屏上表现得很奇怪

Question

我正在使用 JQuery 在按下 div 时滑动切换导航栏。

JQuery:

$(document).ready(function() {
    $(".menu-toggle").click(function() {
        $(".nav").slideToggle();
    });
});

HTML：

<div class="menu-toggle">Toggle Menu</div>
<nav class="sidebar">
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

这在台式机上运行良好，但在使用触摸屏（即智能手机）时会起作用。当您按下 .menu-toggle 按钮时，.nav 会按预期上下切换。但是，当您用手指滚动页面时，.nav 会自行隐藏。它不会向后滑动切换，它只是“消失”，您必须再次按下 .menu-toggle 按钮才能再次显示它。

我该如何解决这个问题，以便当用户使用触摸屏向下滚动页面时，.nav 不会自动隐藏？

编辑：这是实际代码

HTML：

<div class="resized-menu">
    Toggle Menu
</div>
<nav class="main-nav">
    <div class="inner-wrapper">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
        </ul>
    </div>
</nav>

JQuery:

$(document).ready(function() {
    $(".resized-menu").click(function() {
        $(".main-nav").slideToggle();
    });
});

$(window).resize(function() {
    //hide/show main navigation when window is resized
    if($(window).width() >= 550) {
        $(".main-nav").show();
        $(".sidebar").show();
    } else {
        $(".main-nav").hide();
        $(".sidebar").show();
    }
});

主要 CSS：

.resized-menu {
    font-size: 3em;
    background: #222;
    color: #FFF;
    cursor: pointer;
    display: none;
    padding: 3px 0px;
}

.main-nav {
    height: 40px;
    background: url("../img/main-nav-bg.png");
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,.3);
    border-bottom: 1px solid rgba(255,255,255,.3);
    display: block;
}

.main-nav ul {
    margin: 0;
    /*margin: 0 0 0 123px;*/
    padding: 0;
    border-left: 1px solid rgba(255,255,255,.3);
    border-right: 1px solid rgba(0,0,0,.3);
}

.main-nav ul li {
    list-style-type: none;
    display: inline;
    float: left;
    width: 16.666%;
    text-align: center;
}

.main-nav li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 7px 15px; /*0px 15px*/
    /*line-height: 40px;*/
    height: 40px;
    transition: .2s linear;
    border-left: 1px solid rgba(0,0,0,.3);
    border-right: 1px solid rgba(255,255,255,.3);
}

带有“仅屏幕和（最大宽度：550px）”的 CSS：

.resized-menu {
    display: block;
}

.main-nav {
    height: 100%;
    border-top: none;
    border-bottom: none;
    display: none;
}

.main-nav ul li {
    width: 50%;
    border: none;
}

.main-nav li a {
    border-bottom: 1px solid rgba(0,0,0,.3);
    border-top: 1px solid rgba(255,255,255,.3);
}

Answer 1

我已经在 iPhone 上的 Safari 和 Chrome 上尝试了您的代码，并且运行良好。 我不知道是什么导致了这个问题，如果您发布整个代码可能会有所帮助。 顺便说一句，jQuery 中的导航选择器应该是不带点的 $("nav").slideToggle() ，因为您选择的是元素而不是类。