Question

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

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会隐藏自己。它没有滑动切换回来，它只是消失了＃34;然后你必须再次按下.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);
}

CSS仅使用＆＃34;屏幕和（最大宽度：550px）＆＃34;：

.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

我在Safari和Chrome上的iPhone上尝试过你的代码，它运行正常。我不知道是什么导致了这个问题，如果你发布整个代码可能会有所帮助。顺便说一句，jQuery中的导航选择器应该是$（“nav”）。slideToggle（）没有点，因为你选择的是一个元素而不是一个类。

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

1 个答案: