Question

使用bootstraps崩溃和悬停事件时遇到了问题。有小的延迟（不确定是否应该发生这种情况），如果你在延迟完成之前将鼠标移出，则不会捕获鼠标。你可以在延迟之前将鼠标移出并重新安装。

我已经创建了一个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类的切换。效果是一样的，这是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崩溃错过事件，快速鼠标通过

1 个答案: