Jquery and javascript element display changes seem to disable media queries for that element

Question

My media queries run just fine, but as soon as I click on the jquery element, media query for the clicked element stops working.

Media query: It's set up to hide and show the ul element based on device width. Works as intended

Jquery: Click on the span element("click here V") when the device width is less than 350px. This shows and hides the ul element. Works as intended

The problem: When I click the jquery element, and increase the window size the media query is not recognized. If I hide the menu with jquery it will stay hidden, and vice versa.

Any advice? I tried all I could think of, and did my research...I can't find the solution.

Here's the code:

var $menuContainer = $("#account-side-menu");
var $menuHeader = $menuContainer.find("h3");
var $menu = $menuContainer.find("ul");
var $downArrow = $menuContainer.find("span");

$(window).resize(function() {
    //check the size of the window to check if the click method should be added
    setMenuClick();
});

function setMenuClick(){
    //bind the click method to the h3 My account paragraph if the width is less than 350px
    if( $downArrow.is(":visible")){
        $menuHeader.unbind("click", toggleMenu);
        $menuHeader.bind("click", toggleMenu);
    } else {
        $menuHeader.unbind("click");
    }
}

setMenuClick();

function toggleMenu(){
    //$menu.toggle() //If you comment out the if statement and use this one it doesn't work either...
    if($menu.is(":visible")){
        $menu.hide();
    } else {
        $menu.show();
    }
}

@media (min-width: 200px){
	div#account-side-menu ul,
    div#account-side-menu span{
		display: inline-block;
	}
}

@media (min-width: 350px){
	div#account-side-menu ul{
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 10px 0;
		font-size: 17px;
	}
  
    div#account-side-menu span{
        display: none;
    }
}

<script      src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="account-side-menu">
    <h3>My Account <span> click here V</span></h3>
    <ul>
        <li><a href="#">Account Settings</a></li>
        <li><a href="#">My History</a></li>
        <li><a href="#">My Published Videos</a></li>
        <li><a href="#">Favorited Videos</a></li>
        <li><a href="#">Subcribtions</a></li>
    </ul>
</div>

So, hide/show add inline style attributes to your HTML, which will have a higher specificity than your CSS declarations. Unrelated note: bind/unbind have been deprecated in favor of on/off in jQuery. — Heretic Monkey
– Heretic Monkey, Commented Nov 18, 2016 at 19:42
Thanks that clears it up! Thanks for the heads up on the bind method! — alexr101
– alexr101, Commented Nov 18, 2016 at 19:48

sandrina-p · Accepted Answer · 2016-11-18 19:49:52Z

1

Force showing the menu when the arrow is not visible with $menu.show();

Also bind/unbind is deprecated. use on/off instead. To know more read here: http://api.jquery.com/off/

function setMenuClick(){
    //bind the click method to the h3 My account paragraph if the width is less than 350px
    if( $downArrow.is(":visible")){
        $menuHeader.off("click", toggleMenu);
        $menuHeader.on("click", toggleMenu);
    } else {
        $menuHeader.off("click");
        $menu.show(); //force to show menu again
    }
}

edited Nov 18, 2016 at 19:49

answered Nov 18, 2016 at 19:45

sandrina-p

4,2409 gold badges38 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexr101 Over a year ago

Awesome! I didn't know bind/unbind was deprecated. Thank you! :)

Collectives™ on Stack Overflow

Jquery and javascript element display changes seem to disable media queries for that element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related