Ответы пользователя по тегу CSS
  • Как правильно дублировать блок в HTML\CSS\JS?

    TRen208
    @TRen208
    В JS пример есть такой код
    var dropdown = $('.dropdown');
    var item = $('.item');
    
    item.on('click', function() {
      item.toggleClass('collapse');
      
      if (dropdown.hasClass('dropped')) {
        dropdown.toggleClass('dropped');
      } else {
        setTimeout(function() {
          dropdown.toggleClass('dropped');
        }, 150);
      }
    })

    То есть, при нажатии на один блок, открываются все. нужно его заменить на этот, должно сработать)

    const dropdown = $('.dropdown');
    
    dropdown.on('click', function() {
      $(this).children(".item").toggleClass('collapse');
      
      if ($(this).hasClass('dropped')) {
        $(this).toggleClass('dropped');
      } else {
          $(this).toggleClass('dropped');
      }
    })



    В чем была ошибка?
    Потому что этот код
    var dropdown = $('.dropdown');
    var item = $('.item');

    Содержит все список элементов с такими классами, а здесь:
    item.toggleClass('collapse');
      
      if (dropdown.hasClass('dropped')) {
        dropdown.toggleClass('dropped');
      } else {
        setTimeout(function() {
          dropdown.toggleClass('dropped');
        }, 150);
      }

    При нажатии все элементы из этого списка изменяются. Поэтому нужно использовать $(this) что-бы получить именно тот элемент, который был нажат.
    Ответ написан
    3 комментария