Question

我的目标是使用bootstrap创建一组折叠按钮，当光标打开时，该按钮会延伸，当光标离开时会折叠。它可能只是一次开放式崩溃。我的代码正在使用一个按钮，但是当我用光标快速按钮时，前两个（按钮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();
});

在鼠标离开时，鼠标上的Bootstrap折叠打开关闭

1 个答案: