0

我在http://www.fpsl.eu建立了一个网站，它有一个大屏幕尺寸的普通水平导航菜单，以及一个隐藏菜单 (#mmenu) 的 jQuery 下拉菜单，直到单击按钮。

这个下拉菜单应该在宽度小于 980 像素时触发，它在 Chrome、Safari 和 Internet Explorer 中会触发。

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

我到底要做什么？我有点吓坏了，因为这基本上破坏了我使站点跨浏览器兼容的尝试-实际上我所能做的就是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>

我正在运行相对较新的 Firefox 23.0.1，所以我想知道它是否只是一个错误——还有其他人能够复制它吗？

编辑：导航栏的 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 ▾&lt;/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：我在这里有一个JSFiddle，只使用正常工作的标头代码 - http://jsfiddle.net/Kg6h4/embedded/result/。但是，在 HTML 中插入主要内容时，问题仍然存在，请参见http://jsfiddle.net/juk5w/18/embedded/result/。

4

0 回答 0