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:

Load website at desktop width (nav element loads fine).
Resize to tablet or mobile size (menu is converted to mobile-style drop-down menu with three bar icon.
Open and close the mobile nav menu (It is set to display:none).
Now, when you resize to desktop width, the nav bar remains set to display: none.

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.

The 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>

The 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

回答1:

Try and add this to your stylesheet:

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

回答2:

When the button is clicked, it is changing the location of the ul that holds the menu. When it is clicked again to hide the menu, it changes everything back, but adds a display:none. You need to remove that from your JS file.

Since you are using a custom function slideToggle which includes most of the individual actions, it'll be difficult to remove. You could recreate your own function and call that instead, or just call all the individual actions. You could also just let it happen and then reset it to display:block;

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle().show(); 
  });
  ... JS Continues ...

EDIT:

You might have an issue with timing. You want the .show() to be applied last and overwrite the .hide() that is part of the .slideToggle(). If you place it as a completion function, it won't fire until after the other is complete.

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle(function() {
              $("#menu").show(); 
        });
  });
  ... JS Continues ...

回答3:

Sample HTML

<div class="navbar-container">
     <ul class="nav group pull-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Location</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Tours</a></li>
        <li><a href="#">Administration</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
     </ul>
     <a href="#" id="pull">Main Menu</a>
</div><!--navbar container-->

Jquery Function

  $(function() {
     var pull = $('#pull');
     menu     = $('.navbar-container ul');
     menuHeight = menu.height();

     $(pull).on('click', function(e) {
         e.preventDefault();
         menu.slideToggle();
      });

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

Styles

#pull {
  display: block;
  width: 80%;
  padding:5px;
  margin:0px auto 0 auto;
  text-decoration:none;
  color:#5a504c;
  background-color:#e7e5e2;
}

来源：https://stackoverflow.com/questions/22328444/desktop-menu-disappears-after-mobile-menu-is-activated-deactivated-and-resized

标签

jquery

html

css

responsive-design