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

Question

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

我的 HTML:

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

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

我的 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 中摘录的.

当网站为 320 像素时我的 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

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

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

尝试将此代码添加到您的媒体查询中:

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;
}