Переключение между кнопками после ожидания анимации свертывания

Question

Я пытаюсь сделать две кнопки, которые могут переключаться между собой, а также обе могут быть не выбраны.У меня есть текущий код, работающий для общего желаемого поведения, но я хочу дождаться окончания свертываемой анимации, прежде чем переключаться в другое состояние.По сути, карты 'Creating Room' и 'Joining Room' не должны перекрываться, т. Е. Нужно подождать, пока другая будет полностью скрыта, прежде чем открыться.

Я попытался поиграться с найденными здесь событиями (https://getbootstrap.com/docs/4.0/components/collapse/#events), но мое решение не может обработать случай, когда обе кнопки становятся невыбранными.

HTML

<button class="btn btn-outline-dark btn-lg mr-3" onclick="collapse('create')">
  Create Room
</button>
<button class="btn btn-outline-dark btn-lg ml-3" onclick="collapse('join')">
  Join Room
</button>

<div class="collapse" id="create">
  <div class="card card-body mt-3">
    Creating Room
  </div>
</div>
<div class="collapse" id="join">
  <div class="card card-body mt-3">
    Joining Room
  </div>
</div>

JavaScript

function collapse(id) {
    $('#create').collapse('hide');
    $('#join').collapse('hide');
    $('#'+id).collapse('toggle')

    $('#join').on('hidden.bs.collapse', function() {
        // Something here?
    })

    $('#create').on('hidden.bs.collapse', function() {
        // Something here?
    })
}

Без прослушивания для hidden.bs.collapse свертывающаяся анимация не завершается, пока не отображается другая опция.

С слушателем я не могу найти способ, который обрабатывает обе опции, будучине выбран.

Вот jsfiddle с полным кодом: https://jsfiddle.net/pLt89cyh/

Спасибо.

Answer 1

Одним из решений является проверка, существует ли какой-либо видимый элемент с классом .collapse, который не является целью текущего нажатого button.Заметьте, что я использовал атрибут data-target, чтобы поддерживать связь между кнопками и их назначением.Теперь, если есть какой-либо видимый элемент с классом .collapse, который не является целью, вы сначала переключаете этот элемент и прослушиваете событие hidden.bs.collapse, прежде чем показывать целевой, для этого мы используем JQuery.one () .В противном случае мы просто переключаем целевой элемент.

Пример:

$(".btn").click(function()
{
    // Don't do anything when some element is in the collapsing transition.
    if ($(".collapsing").length > 0) return;

    var target = $(this).data('target');
    var others = $(".collapse.show:not(" + target + ")");

    if (others.length > 0)
    {
        others.collapse("hide").one("hidden.bs.collapse", function()
        {
            $(target).collapse("show");
        });
    }
    else
    {
        $(target).collapse('toggle');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">

<button class="btn btn-outline-dark btn-lg mr-3" data-target="#create">
  Create Room
</button>
<button class="btn btn-outline-dark btn-lg ml-3" data-target="#join">
  Join Room
</button>
<button class="btn btn-outline-dark btn-lg ml-3" data-target="#leave">
  Leave Room
</button>

<div class="collapse" id="create">
  <div class="card card-body mt-3">
    Creating Room
  </div>
</div>
<div class="collapse" id="join">
  <div class="card card-body mt-3">
    Joining Room
  </div>
</div>
<div class="collapse" id="leave">
  <div class="card card-body mt-3">
    Leaving Room
  </div>
</div>

</div>

Обратите внимание, как это легко расширяется на большее количество кнопок, как показано в предыдущем примере.