Question

我有一个<table>，当用户点击任意行时，我会在其中打开一个上下文菜单，方法是将包含该菜单的<div>直接添加到<tr>（是的，它是不是有效的HTML，我知道......）。

我的问题是，当菜单出现时，它占用了表格行中的非零空间，因此稍微改变了所有<td>的宽度，尽管整个菜单都有z-index: 1（或更高，在子菜单的情况下）。

我需要<div>内的菜单<tr>来处理css着色（当菜单在鼠标下方时，整个<tr>会突出显示，如果菜单不是，则不起作用在<tr> ...内部，但我不想让列在我打开菜单时跳转。

有没有办法迫使<div>在z-index: 0图层中没有任何范围，尽管它会占用上层的空间？

更新

Here's a jsFiddle重现错误。事实证明它也与Twitter Bootstrap中的风格有关 - 如果没有它们，转移就会消失。但是，我需要它们，因为我们的UI是用它设计的......

Answer 1

追加到行中的最后一个td。像 - $(this).children('td:last-child').append这样的东西。颜色似乎没有任何问题。

完整示例

(function () {
    $(function () {
        $('tr').on('click', function(evt) {
            $('.menu').hide().remove();
            $(this).children('td:last-child').append(
                $('<div>')
                    .addClass('menu')
                    .append('<p>This is the context menu</p>')
                );
            
            evt.stopPropagation();
        });
        
        $('body').on('click', function(evt) {
            $('.menu').hide().remove();
        });
    });
})();

tr:hover, tr:hover td {
    background: blue !important;
    color: white;
}

.menu {
    height: 100px;
    width: 80px;
    background-color: green;
    position: fixed;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table table-striped">
    <tr>
        <td>First column</td>
        <td>Second column</td>
    </tr>
    <tr>
        <td>First column</td>
        <td>Second column</td>
    </tr>
</table>

使用z-index＆gt;创建一个<div> 0在零层</div>中占用0个空格

1 个答案:

完整示例