Bootstrap 折叠打开鼠标输入关闭鼠标离开

Question

我的目标是使用引导程序来制作一组折叠按钮，当光标打开时会扩展，然后在光标离开时折叠。它只能是一个开放的崩溃。我的代码正在使用一个按钮，但是当我用光标快速完成按钮时，前两个（按钮 1 和按钮 2）仍然打开，最后一个（按钮 3）工作正常（它打开然后关闭）。我使用this answer 来实现我的代码。有人可以帮我解决吗？这是JSIDDLE 的链接。这是我的 JQuery 代码：

$('.row .collapse-container').on('mouseenter', function(e){
    $textHolder = $('.text-container', this)[0];

    $($textHolder).queue(function(){
        $($textHolder).collapse('show');
        if (!$($textHolder).hasClass('collapsing')){
            $(this).dequeue();      
        }
    })
    if (!$($textHolder).hasClass('collapsing')){
        $($textHolder).dequeue();
    }
})
$('.row .collapse-container').on('mouseleave', function(e){
    $textHolder = $('.text-container', this)[0];
    $($textHolder).queue(function(){
    $($textHolder).collapse('hide');
        if (!$($textHolder).hasClass('collapsing')){
            $(this).dequeue();      
        }
    })
    if (!$($textHolder).hasClass('collapsing')){
        $($textHolder).dequeue();
    }
})
$('.row').on('shown.bs.collapse hidden.bs.collapse', '.text-container', function(e) {
    $(this).dequeue();
});

Answer 1

在我让它休眠后，我得到了一个解决方案，它在我的测试中 99% 有效。唯一不起作用的情况是当我在运行折叠动画时输入元素。但这是我目前能做的最好的事情。这是我的解决方案，如果其他任何东西都足以使用它。或者如果能让它 100% 工作，那就太好了。这是JSIDDLE的链接和jQuery代码：

$('.row .collapse-container').on('mouseenter', function (e) {
    $textHolder = $('.text-container', this)[0];

    $($textHolder).queue(function () {
        $($textHolder).collapse('show');
    })
    if (!$($textHolder).hasClass('collapsing')) {
        $($textHolder).dequeue();
    }
})
$('.row .collapse-container').on('mouseleave', function (e) {
    $textHolder = $('.text-container', this)[0];
    if ($($textHolder).hasClass('collapsing')) {
        $($textHolder).queue(function () {
            $(this).collapse('hide');
            $(this).dequeue();
        });
    }else{
        $($textHolder).collapse('hide');
    }
})
$('.row').on('shown.bs.collapse hidden.bs.collapse', '.text-container', function (e) {
    $(this).dequeue();
});