javascript - jQuery .toggle() and Media Queries - Stack Overflow

admin管理员组

文章数量:1278910

I'm using .toggle() on a button element:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggle();
    event.preventDefault();
});

This works great. The problem is if the button is toggled to display:none and then I change the device orientation, triggering my desktop media query, despite the fact I re-force display:block; on the desktop media query, the button remains toggled to display:none:

(Sass):

.site-nav-wrapper{

            //Mobile First
            display:none;

            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

Is there a way to reset whatever the toggle() function is storing?

I'm using .toggle() on a button element:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggle();
    event.preventDefault();
});

This works great. The problem is if the button is toggled to display:none and then I change the device orientation, triggering my desktop media query, despite the fact I re-force display:block; on the desktop media query, the button remains toggled to display:none:

(Sass):

.site-nav-wrapper{

            //Mobile First
            display:none;

            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

Is there a way to reset whatever the toggle() function is storing?

• javascript
• jquery

Share Improve this question Follow asked Aug 21, 2012 at 2:52 YahreenYahreen 1,66977 gold badges2424 silver badges3838 bronze badges 1

• You can try removing the element's style attribute: $("header button").removeAttr('style'); – Blender Commented Aug 21, 2012 at 2:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

toggle uses inline styling, which overrides whatever you're doing in your stylesheet.

To get the desired result, you should use a special hidden class to hide the element, and use toggleClass instead.

SASS:

.site-nav-wrapper.hidden {

    display: none;

    @include breakpoint($breakpoint-lg) {
        display: block;
    }
}

JS:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggleClass('hidden');
    event.preventDefault();
});

If I remember correctly toggle sets the display property to none on the element's style attribute. If you want to force the button to display in the "desktop" orientation then you'll need to include an !important declaration in your desktop breakpoint.

Alternately, you can listen for onorientationchanged and switch to the desktop version of the site then (un-toggling / activating everything that needs to be activated).

Why not avoid the toggle so there's no issues with the media queries.

$("header button").click(function(event){
    $(".site-nav-wrapper:visible").hide();
    $(".site-nav-wrapper:hidden").show();
    event.preventDefault();
});

本文标签： javascriptjQuery toggle() and Media QueriesStack Overflow