-1

Todo list

В общем, когда я жму на эту стрелку(свернуть описание дела), то она как то странно себя ведёт, то скрывает, то нет, дёргается. Сказали, что ошибка в коде Js, делегирование неправильное, подскажите пожалуйста.

function blockDescription() {
  $(".button-edit").click(function() {
    console.log('asd');
    $(this).parents('.add-list').find('.add-description').slideToggle();
    var description = $('.add-description');
    let visible = description.is(':visible');
    visible ? description.hide() : description.show();
    let rot = 'rotate(' + (visible ? 0 : 90) + 'deg)';
    $(".button-edit").css({
      '-webkit-transform': rot,
      '-moz-transform': rot,
      '-ms-transform': rot,
      '-o-transform': rot,
      'transform': rot
    });
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-list">
  <div class="list-opened">
    <div class="title-line">
      <span>'+ input +'</span>
      <button class="button">Button</button>
      <button class="button-edit">Button-Edit</button>
    </div>
    <div class="add-description">'+ textarea +'</div>
  </div>
</div>

1
  • 1
    Состояние видимости/невидимости, а также поворот стрелки должны быть в css! В js же вы просто добавляете/убираете нужный класс.
    – DaemonHK
    29 мар 2019 в 3:54

1 ответ 1

0

У тебя два раза срабатывает показать/скрыть элемент по щелчку! Поправил. Поправь rotate если необходимо.

function blockDescription() {
  $(".button-edit").click(function() {
    console.log('asd');
    //$(this).parents('.add-list').find('.add-description').slideToggle();
    var description = $(this).parents('.add-list').find('.add-description');
    let visible = description.is(':visible');
    visible ? description.slideUp() : description.slideDown();
    let rot = 'rotate(' + (visible ? 0 : 90) + 'deg)';
    $(".button-edit").css({
      '-webkit-transform': rot,
      '-moz-transform': rot,
      '-ms-transform': rot,
      '-o-transform': rot,
      'transform': rot
    });
  });
};

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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