alexr101 alexr101 - 20 days ago 8
Javascript Question

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

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>




Answer

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