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

我认为你要做的就是制作一个手风琴菜单。我从未见过使用严格的div来完成它，但您可能要考虑使用的是带有列表项的无序列表（＆lt; ul＆gt;＆lt; / ul＆gt;）（＆lt; li＆gt;＆lt; / li ＆gt;）on display：none，使用jquery查找并显示您单击的ul中的列表。说到jquery代码，你还没有附上你的代码，所以请做。

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

下拉菜单断开连接

1 个答案: