jquery，tablesorter过滤器和菜单：重叠时菜单消失

Question

我有一个页面，我在其中使用 tablesorter 组件和 jquery 菜单。 tablesorter 正在使用鼠标悬停时出现的过滤行搜索功能。问题是，一旦菜单关闭并且鼠标移到 tablesorter 隐藏行上，行就会消失，菜单就会消失。 菜单关闭时如何防止表格排序器过滤器行弹出？

你可以在这里看到我的代码：http://jsfiddle.net/V9a7b/14/

                       <nav id="MyMenu">
                            <ul>
                                <li>&nbsp;</li>
                                <li>&nbsp;</li>
                                <li>&nbsp;</li>
                                <li><a href="/">Home</a></li>
                                <li><a href="#">Action</a>
                                    <ul id="MenuAction">
                                        <li><a href="#">Action 1</a></li>
                                        <li><a href="#">Action 2</a></li>
                                        <li><a href="#">Action 3</a></li>
                                        <li><a href="#">Action 4</a></li>
                                        <li><a href="#">Action 5</a></li>
                                        <li><a href="#">Action 6</a></li>
                                        <li><a href="#">Action 7</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Account</a>
                                    <ul id="MenuAccount">
                                        <li><a href="#">Change&nbsp;Password</a></li>
                                        <li><a href="#">View&nbsp;Accounts</a></li>
                                        <li><a href="#">Create</a></li>
                                        <li><a href="#">View&nbsp;Roles</a></li>
                                        <li><a href="#">Log&nbsp;off</a></li>
                                    </ul>
                                </li>
                                <li>&nbsp;</li>
                                <li>&nbsp;</li>
                                <li>&nbsp;</li>
                            </ul>
                        </nav>

<table cellspacing="1" cellpadding="1" id="PackagesTable" class="tablesorter">
    <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
            <th>Field 3</th>
            <th class="filter-select filter-onlyAvail">Status</th>
            <th>Field 5</th>
        </tr>
    </thead>
    <tbody id="PackageList">
    <tr class="PackageRows" id="Tr1">
        <td><a style="text-decoration:none" href="#">test1</a></td>
        <td>test #11</td>
        <td></td>
        <td>Sent to QA</td>
        <td><span class="time">2014/04/09 18:45:01</span></td>
    </tr>
    <tr class="PackageRows" id="Tr2">
        <td><a style="text-decoration:none" href="#">test2</a></td>
        <td>bla bla...</td>
        <td></td>
        <td>Active/In Development</td>
        <td><span class="time">2013/12/17 18:36:35</span></td>
    </tr>
    </tbody>
</table>

<script type="text/javascript">
    window.onload = function () {
        $("#PackagesTable").tablesorter({
            theme: 'blue',
            widthFixed: false,
            widgets: ["zebra", "filter"],
            widgetOptions: {
                filter_filteredRow: 'filtered',
                filter_hideFilters: true
            }
        });

    }

</script>

Answer 1

当您将filter_hideFilters option 设置为true 时。过滤器小部件将hideme 的类名添加到过滤器行。这个类名本质上使过滤器输入消失，但您仍然可以使用选项卡来访问它们。见the css here。

hideme 类名被删除的唯一情况是任何过滤器输入具有值、任何过滤器输入具有焦点或用户将鼠标悬停在过滤器行上。

我没有看到所描述的下拉菜单与过滤器行重叠的情况，并且指针被带到过滤器行以使其展开。至少在 Chrome 和 Firefox 中没有。

如果您在其他浏览器中看到此行为，那么为什么不将filter_hideFilters 选项设置为false。