Изменение блоков по клику

Тема в разделе "JavaScript", создана пользователем AlexGood, 6 ноя 2019.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Не знаю смогу ли объяснить мою проблему, но попробую
    Схематично: https://prnt.sc/ptb3xq
    т.е. у меня есть слева меню, по середине контент и справа таблица на которой расположена стрелка, при клике на которую таблица открывается на всю ширину до левого меню поверх контента, и стрелка переворачивается в другую сторону, а по клику на нее опять возвращается в исходное положение и таблица и стрелка анимированно (плавно в общем).
    Изначально начал вот так и на первом этапе вошел в ступор:
    Код:
    $(document).ready(function() {
        $('#button-change-table-moneyback').click(function () {
            if ($("#button-change-table-moneyback").hasClass('first-state-of-the-button')){
                $("#button-change-table-moneyback").addClass('second-state-of-the-button');
            }else if{
            ($("#button-change-table-moneyback").hasClass('second-state-of-the-button')){
                $("#button-change-table-moneyback").removeClass('first-state-of-the-button');
                console.log('back2');
            }
            // $("#button-change-table-moneyback").addClass('second-state-of-the-button');
            // console.log('back');
        });
    });
    так наверное будет более читабельно: https://prnt.sc/ptb0yg
    Таблицу еще даже не трогал. Стрелка анимированно переворачивается, а при втором клике даже нет никакой реакции, чтобы банально вернуться в начальное положение

    По хорошему надо куда -нибудь залить - сейчас попробую - пробую на Query - вроде все просто, но чет все как обычно)


    ...сделал правки на первом скрине а то сам ничего не понял на первом...
    вот так выглядит css: https://prnt.sc/ptb5pk
    --- Добавлено, 6 ноя 2019 ---
    что-то тут вообще нифига не пашет ((( https://jsfiddle.net/AlexGood2016/7yf23bL0/58/
    --- Добавлено, 6 ноя 2019 ---
    поправил линк, а то какая-то шляпа там: https://jsfiddle.net/AlexGood2016/7yf23bL0/58/#&togetherjs=73wp3kp9l8
     
    Последнее редактирование: 6 ноя 2019
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.305
    Слишком сложно.
    Надо использовать один класс, который указывает на активное состояние стрелки и переключать его через toggleClass().

    Тут скобки местами перепутаны.
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    попробую как-нибудь иначе реализовать
    может найду какой-нибудь более простой способ
     
  4. Eziwol

    Eziwol

    Регистрация:
    26 янв 2018
    Сообщения:
    5
    Симпатии:
    1
    интересно, какой выход вы все же нашли? потому как у меня чем-то похожая задача.
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    если честно я толком не знаю... бэк на своей стороне что-то сделал...