jQuery click函数—选择器的css未被更改

Question

I'm going nuts over an issue I'm sure is obvious to someone.

I want a certain section of my page to disappear when a button is clicked.

Here's my code:

$(document).ready(function(){
   $('.button').click(function() {
        $('.page-section').css('display', 'none');
   });
});

The script is being referenced correctly. jQuery is being loaded first. If I put an alert('something') inside the click event, it fires.

But for some reason, I am unable to get the css to change.

When I use the same line of code in my console, the css changes as it should.

Any ideas?

Answer 1

Try replace this:

 $('.page-section').css('display', 'none');

with this:

 $('.page-section').css({'display':'none'});

or

 $('.page-section').hide();

Hope it helps.

Answer 2

Your code seems like it should work. Have you inspected that element with developer tools after clicking the button? You should be able to see what classes are being applied, even if another style is overriding it, for example, if you had .page-section{display:block !important;} somewhere in your stylesheet, your jQuery wouldn't hide it. It also seems possible that that element is actually being hidden, but it's actually some other element you're trying to hide.