Какой псевдокласс применить в данном случае?

Question

[coderxx]

Есть выпадающее меню, нужно чтобы после клика по какому-либо пункту эффект, который возникает при :hover, сохранялся пока данный пункт открыт, как сделать?
https://codepen.io/anon/pen/PXmrxj

Comments

[alex]

никак

[coderxx]

Alex, 100% я так делал, не могу вспомнить где. Найду скину сюда.

[alex]

coderxx, нет не делали. В цсс нет псевдоклассов, которые позволяют обращаться к родителю. В вашем случае можно просто вешать класс active на frame и от него делать каскад

[coderxx]

Senseich, отлично! вынесите пожалуйста в ответы, закрою вопрос.

[coderxx]

Alex, согласен, то было на джейквери.

[Senseich]

coderxx, ага, вынес, спс )

Answer 1

[Senseich]

coderxx, зачем, если можно это на квери сделать. в принципе можно сделать как неактивные ссылки и использовать : active , но это костыль )

Может проще создать класс, например:

.faq__question_w {
	border-bottom: dashed 3px white;
}

Тогда скрипт будет, как то так:

$('.faq__question').on('click', function () {
    $(this).toggleClass('faq__question_w').next('.faq__answer').slideToggle();
    $(this).closest('.frame').siblings().find('.faq__answer').slideUp();
  $(this).closest('.frame').siblings().find('.faq__question').removeClass('faq__question_w');
});

Ну это на скорую руку. может проще можно *)

Comments

[coderxx]

респект

Answer 2

[Вероника]

Если проще - при клике вешать класс, например, "active". И задать ему в css стили. Всё :)

$('.faq__question').on('click', function () {
  $('.faq__question').removeClass('active');
  if (!$(this).hasClass('active')) {
    $(this).addClass('active');      
  }
  $(this).next('.faq__answer').slideToggle();
  $(this).closest('.frame').siblings().find('.faq__answer').slideUp();
});