javascript - Responsive Design and onclick events - Stack Overflow

admin管理员组

文章数量:1401609

I have a mobile menu button (only viewable with display:block by using media queries). When the button is clicked, my main "mobile" menu appears - I do this using simple javascript code (see below).

The problem ... if I click the button to expand the menu (changing the inline style from display:none to display:block), and then increase the browser size ... my menu doesn't disappear anymore. So, the inline style doesn't recognize the media query...

Below is the script that expands my menu...

<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

Here are some of the styles.... you'll see the menu-mobile (which is the actual menu) and the mobile-menu-but (which is the button) is hidden (with display:none). When the browser window is reduce, the button appears (with display:block in the media query), but the menu is still hidden. Then when you click the javascript button, the inline style display:block is added to set for the mobile-menu.

#mobile-menu-but, #menu-mobile { display:none; } 
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }

@media (max-width: 790px) { 
  /* Switch to Mobile Menu when too long */
  #menu { display:none; } /* Hide Main Menu  */
  #mobile-menu-but { display:block; float:right; margin:0 20px 0 0; height:50px; padding:5px 0; } 
   #mobile-menu-but a { float:right; }
    .menu-txt { margin:10px 10px 0 0; float:right; }

    #menu-mobile { width:100%; background-color:#000; text-transform:uppercase; 
            font-size:16px; font-family:"AvantGarde", "Helvetica Neue", Arial, Helvetica, sans-serif; } }

I have a mobile menu button (only viewable with display:block by using media queries). When the button is clicked, my main "mobile" menu appears - I do this using simple javascript code (see below).

The problem ... if I click the button to expand the menu (changing the inline style from display:none to display:block), and then increase the browser size ... my menu doesn't disappear anymore. So, the inline style doesn't recognize the media query...

Below is the script that expands my menu...

<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

Here are some of the styles.... you'll see the menu-mobile (which is the actual menu) and the mobile-menu-but (which is the button) is hidden (with display:none). When the browser window is reduce, the button appears (with display:block in the media query), but the menu is still hidden. Then when you click the javascript button, the inline style display:block is added to set for the mobile-menu.

#mobile-menu-but, #menu-mobile { display:none; } 
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }

@media (max-width: 790px) { 
  /* Switch to Mobile Menu when too long */
  #menu { display:none; } /* Hide Main Menu  */
  #mobile-menu-but { display:block; float:right; margin:0 20px 0 0; height:50px; padding:5px 0; } 
   #mobile-menu-but a { float:right; }
    .menu-txt { margin:10px 10px 0 0; float:right; }

    #menu-mobile { width:100%; background-color:#000; text-transform:uppercase; 
            font-size:16px; font-family:"AvantGarde", "Helvetica Neue", Arial, Helvetica, sans-serif; } }

• javascript
• css
• responsive-design
• media-queries
• inline-styles

Share Improve this question Follow asked May 12, 2015 at 21:52 JabbamonkeyJabbamonkey 27744 silver badges2323 bronze badges 2

• 1 Inline styles really have nothing to do with media queries. Media queries say what part of a stylesheet applies based on the query criteria. Styles directly applied to elements always override what's in the stylesheet (well except for !important, which is usually a sign of doing something wrong). – Pointy Commented May 12, 2015 at 21:54
• me thinks you can just move #menu { display:none; } out of the media query... – dandavis Commented May 12, 2015 at 21:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Instead of directly manipulating element styles, you can add and remove class values in order to change element appearance. The rules for the class(es) can be affected by media queries because they'll go right into the stylesheet.

Modern browsers provide the .classList API:

function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.classList.contains("showing"))
      e.classList.remove("showing");
    else
      e.classList.add("showing");
}

Now, in your CSS, you can have:

  #menu { display: none; }
  #menu.showing { display: block; }

If you only want to show the menu when the screen is big, add this after those lines above:

  @media screen and (max-width: 700px) { /* or whatever size you want */
    #menu.showing { display: none; }
  }

(There are other strategies for arranging rules in media queries, depending on what you're trying to do.

Rather than add and remove the inline style with e.style.display , use

var e = document.getElementById("someID");
e.className = "someClass";

The problem you have is your inline style is overriding your CSS. Inline style will always have this priority (unless !important I guess - not sure about that).

Here's a trick you can use to avoid JavaScript altogether:

#menu {display:none}
#secret_checkbox {position: absolute; left:-9999px}
#secret_checkbox:checked + #menu {display: block}

<label for="secret_checkbox">Click to open/close menu</label>

<input type="checkbox" id="secret_checkbox" />
<div id="menu">Hello!</div>

The label can be anywhere, the important thing is for the "hidden" checkbox to be immediately before the element it affects. This can make it a lot easier to change how things behave in CSS, plus it has the added benefit of working even if the user has JavaScript disabled ;)

本文标签： javascriptResponsive Design and onclick eventsStack Overflow