使用z-index在另一个div上显示onclick隐藏的div

时间:2016-06-01 17:47:47

标签: html css

menu must float above table-list-div我需要在其父div(table-list-div始终可见)上方显示隐藏菜单(下拉菜单下拉菜单右侧)。

当我点击按钮时,只有一半的菜单显示,另一半保持隐藏在父div中。

如何显示所有菜单wixh是需要显示在其父div之上的div。

<html>
<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <style>
        .table-list-div {
            position: relative;
            z-index: 1;
            border:1px solid blue;
        }
        .table-list-results {
            position: relative;
            z-index: 20;
        }
        .paging {
            position: relative;
            background:#f6f6f6;
            position: relative;
            z-index: 10;
        }
        .dropdown-menu-right
        {
            border:15px solid orange;
            position: relative;
            z-index: 500;
        }
    </style>

</head>
<body>
   <div class="table-list-div always-visible">
        <table class="table-list-results">
            <tr>
                <td class="actions">
                    <div class="btn-group">
                        <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">More</button>
                        <ul  class="dropdown-menu dropdown-menu-right"  >
                            <li ><a href="/action/abc/def">see</a></li>
                            <li ><a href="/action/ghi">cancel</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
        <br>
        <br>
        <br>
    </div>
    <div class="paging paging-bottom center"></div>
</body>

1 个答案:

答案 0 :(得分:1)

好的,如果我理解你的问题,你需要通过点击操纵z-index的可见部分来显示一个隐藏的菜单。

要在javascript中执行此操作,您可以使用

操作z-index
lib.pyx in pandas.lib.astype_intsafe (pandas/lib.c:12697)()

util.pxd in util.set_value_at (pandas/lib.c:49357)()

ValueError: Could not convert object to NumPy timedelta

您可以将onclick事件触发到一个调用类似于我上面的目的的函数。