如何在 bootstrap table <th> 中创建下拉选项

Question

我正在尝试像这样在 table header 中创建一个下拉列表-

下拉示例

              <ul class="dropdown-menu" id="dropEmail" style="position:relative;    z-index: 99999;">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>

<table id="example3" class="table table-bordered table-striped" style=" overflow-x: scroll;" >
    <thead>
        <tr>
            <th></th>
            <th class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Sent Items</a></li>
            <li class="divider"></li>
            <li><a href="#">Trash</a></li>
            </ul>
            </th>
        </tr>
    </thead>
    <tbody >
        <tr>
        <td></td>
        <td></td>
        </tr>
    </tbody>
</table>

但在前端屏幕中，下拉菜单转到 table body 的后面。将 z- 索引设置为 9999 和相对位置甚至不起作用。

Answer 1

如果您将消息锚标记替换为：

<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Messages</a>

它将正常工作。 aria-haspopup="true" 表示该元素将在单击时显示菜单或弹出窗口。

fiddle: http://jsfiddle.net/dtchh/#&togetherjs=EL6OONsxV1

如何在 bootstrap table <th> 中创建下拉选项

how to create dropdown option in bootstrap table <th>

css

bootstrap-table