Javascript jQuery菜单在Firefox中以错误的窗口宽度隐藏触发器-我该怎么做？

我建立了一个网站，它有一个大屏幕的普通水平导航菜单，还有一个jQuery下拉菜单，在点击按钮之前隐藏菜单（#mmenu）

这个下拉菜单应该在宽度小于980px的情况下触发，在Chrome、Safari和Internet Explorer中也是如此

但是，在Firefox中，#mmenu在994px处消失，导航栏空白（该按钮由CSS媒体查询控制，因此在994px处仍设置为显示：无）。在980px时，移动菜单按预期显示

我到底做什么？我有点吓坏了，因为这基本上破坏了我使网站跨浏览器兼容的尝试——实际上我所能想到的就是a）尝试创建一个纯CSS下拉列表，而不是b）让JS控制按钮显示状态，使其在994px上也出现错误（尽管此时菜单项仍处于水平位置，但至少用户可以通过单击来显示它们）

有没有更好的解决方案？是否存在类似Firefox的条件注释

我的jQuery如下所示：

<script type="text/javascript">
jQuery(document).ready(function ($) {
     $(".mtoggle").click(function () {
         $("#mmenu").slideToggle(500);
     });
     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
 });

 $(window).resize(function () {
     if ($(window).width() > 980) {
         $('#mmenu').show();
     }

     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
 });
</script>

jQuery（文档）.ready（函数（$）{
$（“.mtogle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
}
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>980）{
$（'#mmenu'）.show（）；
}
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
}
});

我运行的是相对较新的Firefox23.0.1，所以我想知道这是否只是一个bug——还有人能够复制它吗

编辑：导航栏的HTML如下所示，可在www.fpsl.eu上查看整个页面：

<nav id="access" role="navigation" class="navbar-fixed-top">
            <h1 class="assistive-text section-heading">Main menu</h1>
            <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            <h1 id="site-title"><a href="http://fpsl.eu/" title="First Phase Soft Landing" rel="home"><img src="http://www.fpsl.eu/img/first-phase-logo.png" alt="First Phase Soft Landing" class="logo" /></a></h1>
        <a class="btn-navbar mtoggle" data-toggle="collapse" data-target=".mmenu">
                    <span class="navmenu">&#9776;</span>
                </a>
        <div id="mmenu">
            <div class="menu-first-phase-menu-container"><ul id="menu-first-phase-menu" class="mmenu"><li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-83"><a href="http://fpsl.eu/">Home</a></li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://fpsl.eu/about/">About</a></li>
<li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122 dropdown"><a href="#">Our Services ▾</a>
<ul class="sub-menu">
    <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://fpsl.eu/market-research/">Market Research</a></li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://fpsl.eu/operational-set-up/">Operational Set Up</a></li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://fpsl.eu/fast-track-services/">Fast Track Services</a></li>
</ul>
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://fpsl.eu/testimonials/">Testimonials</a></li>
<li id="menu-item-157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157"><a href="http://fpsl.eu/blog/">Blog</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-106"><a href="#contact">Contact</a></li>
</ul></div>     </div>
        </nav>

主菜单

---

编辑2：我这里有一个JSFIDLE，它只使用正确工作的标题代码。但是，当主要内容插入HTML中时，问题仍然存在，请参见。

你能用JSFIDLE重现错误吗？另外请提供htmlHere是一个JSFIDLE，它只使用正确工作的标题代码。当tent被插入到头的下面，jQuery触发得太早，就像在这个JSFIDLE-。不知道现在要做什么。。。