jQuery-使用.mouseout或更合适的方法来关闭下拉菜单，提示? [英] jQuery - close dropdown with .mouseout or a more suitable method, hint?

问题描述

我有以下代码:

$(".option_box .option_name").click(function () {
    $(this).siblings(".collapsible").toggle();
    $(this).toggleClass("hided");
});

$(".option_box .attribute_group_name").click(function () {
    $(this).siblings(".attribute_box").toggle();
    $(this).toggleClass("hided");
});

与之关联的HTML代码为:

The HTML code associated with it is:

<div class="option_box" style="left:140px;">
    <div class="option_name">Gama</div>
    <table class="collapsible">
        <tr>
            <td><input id="gama_1" class="gama_value filtered" type="checkbox" name="gama[]" value="1" /></td>
            <td><label for="gama_1">Correcta</label></td>
        </tr>
        <tr>
            <td><input id="gama_2" class="gama_value filtered" type="checkbox" name="gama[]" value="2" /></td>
            <td><label for="gama_2">Aficionado</label></td>
        </tr>
        <tr>
            <td><input id="gama_3" class="gama_value filtered" type="checkbox" name="gama[]" value="3" /></td>
            <td><label for="gama_3">Entusiasta</label></td>
        </tr>
        <tr>
            <td><input id="gama_4" class="gama_value filtered" type="checkbox" name="gama[]" value="4" /></td>
            <td><label for="gama_4">Purista</label></td>
        </tr>
        <tr>
            <td><input id="gama_5" class="gama_value filtered" type="checkbox" name="gama[]" value="5" /></td>
            <td><label for="gama_5">Exclusive</label></td>
        </tr>
    </table>
</div>

这是从视觉上产生的:

我的问题是我希望将鼠标移出下拉菜单(实际上是一个内部有表格的 div 元素)，但是如您所见，这并不是那么容易，因为像开始时那样声明.mouseout事件不是问题.

My problem is I want for the dropdown (which, in practical reality, is a div element with a table inside) to close when I move the mouse out of it but, as you can see, it's not that easy, as it's not a matter of declaring a .mouseout event like I did in the beginning.

下拉列表由标题"和正文"两部分组成，我希望整个下拉列表在我放弃一个或另一个时自行关闭，但到目前为止，还没有运气.我缺乏jQuery的一些实际知识(这里和那里只是一点点的接触，但暂时还没有出色的表现)，所以我很困惑.我尝试了.mouseout，.mouseleave，.focusout和其他方法.

The dropdown is composed of two parts, the 'header' and the 'body' and I want for the whole dropdown to close itself when I abandon either one or the other but, so far, no luck. I lack some real knowledge in jQuery (just a bare touch here and there, but nothing stellar for the moment), so I'm confused. I tried .mouseout, .mouseleave, .focusout and other methods.

我什至依靠jQuery ++使用 .within 方法，但我同样迷失了方向.你们中的任何一个都可以指出我正确的方向吗?

I've even resorted to jQuery++ to use the .within method but I'm equally lost. Could any of you point me to the right direction?

推荐答案

据我了解:您希望使用mouseout折叠表格.为什么不添加这样的内容:

As i understood: you would like to collapse table with mouseout. Why don't you add something like this:

$(".collapsible").mouseleave(function() {
    $(".collapsible").hide();
})

对您不起作用吗?

这篇关于jQuery-使用.mouseout或更合适的方法来关闭下拉菜单，提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！