移动菜单被激活/停用和调整大小后桌面菜单消失 [英] Desktop menu disappears after mobile menu is activated/deactivated and resized

问题描述

该站点是响应式站点，您可以通过以下方式复制问题:

The site is a responsive site and this is how you duplicate the issue:

1. 以桌面宽度加载网站(导航元素加载良好).
2. 调整为平板电脑或手机尺寸(菜单转换为带有三栏图标的移动式下拉菜单.
3. 打开和关闭移动导航菜单(设置为 display:none).
4. 现在，当您调整到桌面宽度时，导航栏仍设置为显示:无.

我知道我可以通过创建两个菜单栏并只对它们应用单独的 ID 来解决这个问题，但我想看看是否有人有一个解决方案，让我只需要维护一个菜单.

I am aware that I could solve the issue by creating two menu bars and just applying separate ids to them, but I wanted to see if anyone had a solution to allow me to only have to maintain one menu.

HTML:

<nav>
    <ul id="menu">
        <li><a href="#">Who We Are</a></li>
        <li id="information">
            <a href="#">Why We're Different</a>
        </li>
        <li id="services">
            <a>GPA Services</a>
            <ul id="servicesmenu">
                <li><a href="#">HealthWatch</a></li>
                <li><a href="#">ClaimWatch</a></li>
                <li><a href="#">Administrative Services</a></li>
                <li><a href="#">Marketing and Sales</a></li>
                <li><a href="#">Specialty Services</a></li>
            </ul>
        </li>
        <li id="login"><a>Login</a>
            <ul id="loginmenu">
                <li><a href="#">Employers</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Brokers</a></li>
                <li><a href="#">Providers</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

jQuery:

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle(); 
  });
    $("#services").click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideToggle();
    });
    $("#login").click(function() {
        $("#servicesmenu").slideUp();
        $("#loginmenu").slideToggle();
    });
    $('html').click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideUp();
    });
    $('#login, #loginmenu, #services, #servicesmenu').click(function(event){
        event.stopPropagation();
    });
});

或者您可以在此处查看页面的测试版本(注意:页面/图像尚未针对加载时间进行优化，因此某些图像的大小使加载时间有点长):

Or you can view a test version of the page here (note: the page/images have not been optimized for load time, so the sizes of some of the images make the load times a little long):

http://test.digital-scorpion.com/gpa/index.php

推荐答案

尝试将其添加到您的样式表中:

Try and add this to your stylesheet:

@media screen and (min-width:1199px) {
       #menu { display:block !important; }
}

这篇关于移动菜单被激活/停用和调整大小后桌面菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！