Jquery change class CSS on click event -

have got code similar work, cant work instance.

using jquery change css of div above link hide subnav (currently stays open because link href="#").

all links have class of "team" , once of them clicked, should change subnav display="none"

code is:

$('a.team').click(function() {     $('.subnav', this).css('display','none');  }); 

jsfiddle: http://jsfiddle.net/a9aye/

you supposed using closest (as subnav ancestor of .team elements)

$(this).closest('subnav').css('display', 'none');  

  

it better idea use class change style instead of defining them inline

.hide{     display: none; } 

just add class apply specific class. lot more cleaner , less messy.

also prevent default action of link being followed.

$('a.team').click(function (e) {           e.preventdefault();     $(this).closest('.subnav').addclass('hide') }); // remove hide class // has more specificity $('.nav > li').mouseover(function (e) {        $('.subnav').removeclass('hide') }); 

you encounter specificity issues in example.

when set display:none inline can override specifying inline again.

use classes instead. , see same issue again. writing more specific class should solve issue.. , css should below work.

css

.nav > li .subnav {     display:none; } .nav > li:hover .subnav {     display:block; }  .nav > li .hide.subnav{     display: none; } 

check fiddle