Cant change display value with jquery on click

Question

Im trying to make simple button to show and hide menu when screen is smaller than 35em. But the issue is that my jQuery click event doesnt change display value for my list items.

CSS:

div{
  list-style:none;
  width:100%;
  text-align:center;
}
ul li{
  display:inline-block;
}
#menuToggle {
  display:none;
}
@media screen and (max-width: 35em) {
  #menuToggle {
    display:block;
    cursor:pointer;
  } 
  ul li{
    display:none;
  }
}

jQuery:

$('#menuToggle').click(function(){
  $('ul li').css('display','block');
}

Demo: http://jsfiddle.net/bLamG/

How can I establish that?

It does work: See fiddle : http://jsfiddle.net/bLamG/4/ – The Dark Knight Aug 15 '13 at 10:34 — The Dark Knight, Aug 15 '13 at 10:34

score 1 · Accepted Answer · answered Aug 15 '13 at 10:19

1

Your code should work, but you have no closing ); so your code is throwing a syntax error. Try this:

$('#menuToggle').click(function () {
    $('ul li').css('display', 'block');
});

Updated fiddle

answered Aug 15 '13 at 10:19

Rory McCrossan

331,213
40
305
339

score 0 · Answer 2 · answered Aug 15 '13 at 10:21

0

You are missing the closing );

You should also use 'on' method instead.

$('#menuToggle').on('click', function () {
     $('ul li').css('display', 'block');
});

answered Aug 15 '13 at 10:21

1

Why on()? My #menuToggle is on the page at first when page is generated. Isnt click() just a shorthand for that? – Maksim Aug 15 '13 at 10:24
Just incase you would want to create menu items dynamically. This explains it http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click – Aug 15 '13 at 10:26
@ChrisTill the `on()` function you've used does not have a delegate parameter, so will not work for 'creating menu items dynamically' anyway. – Rory McCrossan Aug 15 '13 at 10:29

Cant change display value with jquery on click

2 Answers2