jquery - 下拉菜单断开连接

Question

我所有 pages 的顶部都有一个导航栏.当浏览器宽度小于 40em 时，导航栏中的链接变成汉堡包。单击时，汉堡包变为绿色并使用 jQuery toggleClass 函数下拉菜单。在我尝试过的所有浏览器(Chrome、Firefox、Safari 和 iOS)上，除了 iOS，汉堡包都能正常工作。但是，在 iOS 上，汉堡包变为绿色，离开标题，并且下拉菜单与标题断开连接。
HTML:

<span class="mobile-nav">
    <div class="menu-btn" id="menu-btn">
        <div>
            <a href="#" id="hamburger" onclick="return false;">
            </a>
        </div>
    </div>
    <div class="responsive-menu">
        <div>
            <div class="spacer"></div>
            <a href="/about">About</a><div class="spacer"></div>
            <a href="/why">Why Enc0de</a><div class="spacer"></div>
            <a href="/contact">Contact</a><div class="spacer"></div>
        </div>
    </div>
</span>

CSS:

.mobile-nav {
    float: right;
}
.responsive-menu {
    display: none;
}
#hamburger {
    margin: .813em 1.25em 0em 0em;
    width: 2.5em;
    height: 2.125em;
    float: right;
    background-image: url('/images/hamburger.gif');
    background-size: 2.5em 2.125em;
    background-repeat: no-repeat;
}

#hamburger.expand {
    background-image:url('/images/green_hamburger.gif'); 
}
div.expand {
    position: relative;
    display: inline-block;
    z-index: 999;
    background-color: rgba(247, 247, 247, 1);
    top: .843em;
    right: 0em;
    border-style: hidden;
    border-width: .063em;
    border-radius: 0em 0em 0em .5em;
    box-shadow: 0 .188em .375em rgba(0, 0, 0, 0.24);
}
div.expand div {
    margin: 0em;
    padding: 0em;
}
div.expand div a {
    font-size: 1.5em;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    margin: 0em .5em 0em .75em;
    color: black;
    text-decoration: none;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
div.expand div a:hover {
    color: #00c900;
}

jQuery:

jQuery(document).ready(function ($){
    $( '.menu-btn' ).click(function(){
    $('.responsive-menu').toggleClass('expand')
    $('#hamburger').toggleClass('expand')
    })
});

经过几个小时的研究和尝试调试，我仍然完全困惑。非常感谢任何帮助、建议或想法。

Answer 1

我想你想做的是制作 Accordion 菜单。我从未见过严格使用 div 来完成它，但您可能要考虑使用的是一个无序列表 (

)，其中显示的列表项 (

):无，使用 jquery 在您单击的 ul 中查找和显示列表。说到 jquery 代码，您还没有附上您的代码，所以请附上。

通过此链接观看教程以获得您应该做什么的示例，因为它不仅提供了 html 和 css 代码，还提供了 Accordion 菜单的 jquery 代码:http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3