0

<ul>
  <li>
    1
    <div>
      ghi
    </div>
  </li>
  <li>
    2
    <div>
      def
    </div>
  </li>
  <li>
    3
    <div>
      abc
    </div>
  </li>
</ul>

Помогите пожалуйста решить задачу.
1. При клике на <li> нужно добавить класс этому <li>, а так же вложенному <div>, при повторном клике на этот же <li>добавленные классы должны удалиться.
2. При добавленном классе если кликнуть на другой <li> классы должны удалиться и добавиться тому <li> и вложенному <div> на который кликнули. Классы для <li>и<div> разные.

2

1 ответ 1

0

$('li').click(function() {
    let hasFoo = $(this).hasClass('foo');
    let hasBaz = $(this).find('div').hasClass('baz');
    
    if (!hasFoo && !hasBaz) {
        $('li').removeClass('foo');
        $('li').find('div').removeClass('baz'); 
    }
    
    $(this).toggleClass('foo');
    $(this).find('div').toggleClass('baz'); 
});
.foo {
  font-size: 18px;
}

.baz {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    1
    <div>
      ghi
    </div>
  </li>
  <li>
    2
    <div>
      def
    </div>
  </li>
  <li>
    3
    <div>
      abc
    </div>
  </li>
</ul>

3
  • Нужно чтоб только один элемент списка имел класс, а у вас можно всем класс добавить(
    – Grey Rat
    1 июл 2019 в 12:10
  • @GreyRat исправил
    – InDevX
    1 июл 2019 в 12:25
  • Огромное, спасибо! Вы мне очень помогли!
    – Grey Rat
    1 июл 2019 в 13:01

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.