Bootstrap 鼠标快速移动时折叠错过的事件

Question

我在使用引导程序崩溃和悬停事件时遇到了运行问题。有一个小的延迟（不确定这是否应该发生）并且如果您在延迟完成之前将鼠标移出，则不会捕获鼠标移出。您可以通过在延迟之前将鼠标移出并移回来执行相同的操作。

我创建了一个 js-fiddle 示例来说明正在发生的事情。

<body>
    <div class="box">
        <div class="box_area">
        </div>
        <div class="box_dropdown">
           <ul>
               <li>Test</li>
           </ul>
        </div
    </div>
</body>

$(document).ready(function () {
    $(".box_area").hover(function(e) {
        $(".box_dropdown").collapse("show")
    }, function(e) {
        $(".box_dropdown").collapse("hide")
    });
})

.box_area {
    width: 200px;
    height: 200px;
    border: solid black 1px;
}

.box_dropdown {
    display: none;
    width: 200px;
    border: solid red 1px;
}

框架和扩展：

//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

外部引用：

//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js

我已经尝试使用 .show 和 .hide 而不是 .collapse，但是我运行在为手机调整大小时遇到了一个不同的错误。所以这不是一个选择，除非我能解决那个错误。然而，展示示例要困难得多，因为它只针对触摸屏显示。

Answer 1

试一试：Fiddle

我改变了你 javascript 的运作方式。我们不是从 Bootstrap 触发 .collapse() 插件，而是触发 in class 的切换。效果是一样的，也是 Bootstrap 用于他们的崩溃系统的东西，但在这种情况下我们只是从不同的方式来处理它。

您必须全屏显示该代码段才能看到它正常工作。

$(document).ready(function () {
    $(".box_area").hover(function(e) {
        $('.box_dropdown').toggleClass('in');
    }, function(e) {
        $('.box_dropdown').toggleClass('in');
    });
})

.box_area {
    width: 200px;
    height: 200px;
    border: solid black 1px;
}

.box_dropdown {
    display: none;
    width: 200px;
    border: solid red 1px;
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="box">
        <div class="box_area">
        </div>
        <div class="box_dropdown collapse">
            <ul>
                <li>Test</li>
            </ul>
        </div>
    </div>
</body>

Bootstrap 鼠标快速移动时折叠错过的事件

Bootstrap Collapse missed event when mousing through quickly

javascript

jquery

show-hide

twitter-bootstrap-3