在单击函数上两次使用toggleclass，而不是对响应菜单使用show（）hide（）

Question

I'm experimenting with a responsive menu and my aim is to have a normal menu that goes to display : none when the browser is resized to a smaller size, and is instead replaced by a grid symbol (for now it's just a coloured box).

Some HTML is here:

<div class="mplace">

<a class="grid" href="#"></a>
<a class="close" href="#"></a>

<div class="holder">

<ul class="menlist">
<li><a href="http://www.w3schools.com">Home</a></li><li>
<a href="http://www.bing.com">Bing</a>
</li><li><a href="http://www.yahoo.com">Yahoo</a>
</li><li><a href="http://www.google.com">Google</a>
</li><li><a href="http://www.w3schools.com/about/default.asp">Contact</a></li>

</ul>

</div>
</div>

Anyway, I don't know if this is a real world problem but I want to be able to click the symbol and have the menu appear, then when the close symbol is clicked the menu is hidden again. Then the normal CSS should override the jquery so that if the browser is again resized to full screen the grid symbol will be hidden.

The problem I have is this is not happening with the jquery I am using. I have tried using toggleClass instead to toggle between display : none, and display : block, but this leaves the grid symbol showing when you go back to full screen.

In any case. This jquery works to alternate between symbols and show and hide the menu but when you go back to full screen after having clicked the symbol it does not go back to display : none. You can see the issue at this JSfiddle

$(document).ready(function() {

$('.grid').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.grid').hide();
    $('.close').show();
});

$('.close').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.close').hide();
    $('.grid').show();
});

});

However, what I want to be able to do is just put toggleClass like this. In this case the class of 'hide' and 'show' would be in the CSS as display : none and display : block

$(document).ready(function() {

$('.grid').click(function(){
    $('.holder ul').toggleClass('menlist');
    $('.grid').toggleClass('hide');
    $('.close').toggleClass('show');
});

});

This would mean when the grid button is clicked it would be set to display : none while the x symbol would be set to display : block. Then vice versa would happen with some more jquery.

I have tried everything I can think of, but it just isn't working.

Answer 1

You really just need to use toggleClass and then toggle a class to your menu and give this your original menu css of display:none then the toggled class a css of display:block like the following:

You can put both your menu open and menu close buttons on the same jquery click function seperated by a comma and it will add and remove the class accordingly.

Here is a fiddle Fiddle Demo

$(document).ready(function() {
  $('.grid, .menu-close').click(function(){
        $('.menu-list').toggleClass("menu-open");
  });
});

then your css will be like the following:

.menu-list{
  display:none;
}
.menu-list.menu-open{
  display:block;
}