Изменить фон при нажатии

Question

Может кто-нибудь мне помочь или помог? Я искал и читал, но найти ответы не найду. Я вроде бы не в jquery, поэтому мне нужна помощь. У меня есть выпадающее меню. То, что я хотел бы добиться от этого, - когда я нажимаю подменю с выпадающим меню sub sub, он меняет фон. Теперь это сработало, фоновые изменения, но это относится к его элементам-братьям, которые также выпадают. Я хотел бы изменить фон элемента, который нажал.

JQuery:

$('.withsub a').on('click', function() { 
    if ($(this).siblings('.tmenu-subs02').is(':visible')) { 
     $(this).siblings('.tmenu-subs02').hide(); 
     $('.withsub').removeClass('clicked'); 
    } else { 
     $(this).siblings('.tmenu-subs02').show(); 
     $('.withsub').addClass('clicked'); 
    } 
}); 

см actual demo

Answer 1

Я обновляю fiddle:

$('.withsub a').on('click', function() { 
    if ($(this).siblings('.tmenu-subs02').is(':visible')) { 
     $(this).siblings('.tmenu-subs02').hide(); 
     $(this).parent().removeClass('clicked'); 
    } else { 
     $(this).siblings('.tmenu-subs02').show(); 
     $(this).parent().addClass('clicked'); 
    } 
}); 

Answer 2

Вы ориентируетесь все .withsub элементов, тогда как вам нужно только целевых ближайшего .withsub родительского элемента.

Вы должны использовать:

$('.withsub a').on('click', function() { 
    if ($(this).siblings('.tmenu-subs02').is(':visible')) { 
     $(this).siblings('.tmenu-subs02').hide(); 
     $(this).closest('.withsub').removeClass('clicked'); 
    } else { 
     $(this).siblings('.tmenu-subs02').show(); 
     $(this).closest('.withsub').addClass('clicked'); 
    } 
}); 

Working Demo

Вы также можете сузить свой код, используя .toggle() и .toggleClass()

$('.withsub a').on('click', function() { 
     $(this).siblings().toggle(); 
     $(this).closest('.withsub').toggleClass('clicked'); 
}); 

Demo using toggle and toggleclass

Answer 3

Вы можете сделать, как показано ниже. Используйте .children()

$('.withsub').on('click', function() { 
     if ($(this).children('.tmenu-subs02').is(':visible')) { 
      $(this).children('.tmenu-subs02').hide(); 
      $(this).removeClass('clicked'); 
     } else { 
      $(this).children('.tmenu-subs02').show(); 
      $(this).addClass('clicked'); 
     } 
    }); 

Проверить Updated Fiddle