Question

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

您可以在此处查看我的代码：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添加到过滤器行。此类名实质上使过滤器输入消失，但您仍然可以使用Tab来获取它们。请参阅the css here。

删除hideme类名称的唯一时间是当任何过滤器输入具有值时，任何过滤器输入都具有焦点或用户将鼠标悬停在过滤器行上。

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

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

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

1 个答案: