更改ul的样式onclick - css / jquery

Question

I have this simple menu with some <ul> s that loads its content onclicking on it. And I want to change the style of every ul on loading the content that belongs to it. Here's the menu: http://jsfiddle.net/EPvGf/11/

Answer 1

I'd suggest:

$(this).closest('ul').addClass('newStyle');

Though within a click-handler (assuming nested ul elements):

$('li').click(function(e){
    $(e.target).closest('ul').addClass('newStyle');
});

JS Fiddle demo .

References:

• addClass() .
• click() .
• closest() .
• event.target .

Answer 2

I think you meant styling the corresponding parent li (with the border bottom using the class current ) as you are doing for the first one by default. You can try this:

$('.current').not(
             $(this)
               .closest('li')
               .addClass('current'))
.removeClass('current');

or just

$(this)
       .closest('li') //Get to the parent li
       .addClass('current') //add the class current
       .siblings('.current') // select the sibling with the same class  (previous selection)
       .removeClass('current'); //remove the class from there

Demo

• .siblings()
• .addClass()
• .removeClass()