1

我有以下代码：

$(".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方法，但我同样迷失了方向。你们中的任何人都可以指出我正确的方向吗？

4

1 回答 1

2

据我了解：您想用鼠标悬停折叠表格。你为什么不添加这样的东西：

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

它不适合你吗？

于 2013-03-11T17:41:55.437 回答