DropKick.js菜单 - 页面加载时始终打开

Question

我的响应式网站的dropkick菜单有问题。当网站进入iphone大小时，它会使用dropkick.js更改为此dropkick菜单，这是一个下拉列表。

我的HTML：

<div id="mobilemenu">
    <a href="#" id="pull">Menu</a>
</div>

以上代码仅在您以320px宽度查看网站时才可见。

我的Javascript：

<script type="text/javascript">
    $(function () {
        var pull1 = $('#pull');
        menu1 = $('ul.menuresponsive');
        menuHeight = menu1.height();
        $(pull1).on('click', function (e) {
            e.preventDefault();
            menu1.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu1.removeAttr('style');
            }
        });
    });
</script>

我对Javascript并不是很了解，这取自tutorial。

当我的网站位于320px时我的CSS：

/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }

/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }

现在看来，菜单一直打开，如下图所示，我非常希望它默认关闭，但我似乎无法找到解决方案。

我的菜单在<ul>

内动态呈现为<li>和<div id="mobilemenu">

Answer 1

在教程中，您链接到演示示例有两个媒体查询 - 一个用于515px，另一个用于320px。

515px的css将由320px继承，它包含关闭我认为的菜单所需的代码。

尝试将此代码添加到媒体查询中：

nav {
    border-bottom: 0;
}
nav ul {
    display: none;
    height: auto;
}
nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}