jQuery的 - 与.mouseout或更合适的方法密切下拉，暗示？(jQuery - close

我有以下的代码：

$(".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代码：

<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事件的问题。

下拉是由两个部分组成，在“头”和“体”，我想整个下拉关闭自己，当我放弃一个或另一个，但到目前为止，没有运气。 我缺少jQuery的一些真正的知识（只是一个光秃秃的触摸在这里和那里，但没有恒星的时刻），所以我很困惑。 我试过.mouseout，.mouseleave，.focusout等方法。

我甚至已经使出的jQuery ++使用.within方法，但我同样丢失。 可以任你点我到正确的方向？

Answer 1:

我的理解：你想折叠表鼠标移开。 你为什么不加入这样的事情：

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

不为你工作？

文章来源: jQuery - close dropdown with .mouseout or a more suitable method, hint?