示例：

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，为此，我们使用{{3 }}。否则，我们只切换目标元素。

示例：

$(".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>

请注意如何轻松地将其扩展到更多按钮，如上例所示。

等待合拢动画后在按钮之间切换

1 个答案:

示例：