Как сделать так, чтобы при нажатии на стрелку выпадающего меню, сворачивался блок?

Question

Как правильно написать код, чтобы при нажатии на <img class="list" src="str.png">, сворачивался конкретный блок, а именно <li class ="second_message">${text}</li>?

Событие нужно преобразовать через делегирование. Часть скрипта, как раз-таки написанная для выполнения этого действия:

function slideComments(scroll) {
  scroll.slideToggle();
};

$('body').on('click', 'img.list', function(e) {
  e.preventDefault();
  let scroll = $(this).parents('.second_message')
  slideComments(scroll);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="left__block__info">
  <li class="first_message">${name}<img class="image" src="clear-button.png"></li>
  <img class="list" src="str.png">
  <div class="border"></div>
  <li class="second_message">${text}</li>
</div>

Буду благодарен за поиск ошибки, спасибо.

Answer 1

$(document).on('click', 'img.list', function(){
  let parent = $(this).closest('.left__block__info');
  parent.find('.second_message').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="left__block__info">
  <li class="first_message">${name}<img class="image" src="clear-button.png"></li>
  <img class="list" src="str.png">
  <div class="border"></div>
  <li class="second_message">${text}</li>
</div>

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на стрелку выпадающего меню, сворачивался блок?

Ответы (1 шт):