从Bootstrap中的表行下拉菜单

Question

从Bootstrap中的表行下拉菜单

Sky*_*ebS 3 row html-table twitter-bootstrap drop-down-menu jasny-bootstrap

我正在尝试使用发现的http://www.jasny.net/bootstrap/javascript/#rowlink找到的Jasny扩展从表行中获取一个下拉菜单.不幸的是,我似乎无法让它显示下拉列表.我举例说明了迄今为止我所做的事情:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>?

Run Code Online (Sandbox Code Playgroud)

单击行将跟随href链接,而不是显示下拉菜单.我可以将rowlink扩展名作为链接或调用模态窗口.我也可以从单个单元格(没有jasny扩展名)得到一个下拉列表,但希望它能从整行开始工作.

Answer 1

Shi*_*hah 7

默认情况下,表格单元格内的引导程序下拉列表未正确显示(它们将显示在页面底部).要解决此问题,您需要将容器的类设置为下拉列表.对于表格单元格,这将如下所示:

<td class="dropdown">

Run Code Online (Sandbox Code Playgroud)

演示:http: //jsfiddle.net/Sherbrow/unWCN/4/

PS:如果您不想更改表格单元格的样式,您还可以在单元格内创建一个div并将其类设置为"下拉列表".

Answer 2

Jas*_*els 5

不幸的是 rowlink 只适用于 href 并且不传播 js 事件。所以它不能用于下拉菜单。

\n\n

仔细观察下拉列表代码，会发现在初始化下拉列表后，单击下拉切换除了切换“打开”类之外，并没有做更多的事情。我们可以很容易地模仿它。现在我们只需要确保下拉列表在加载时初始化，而不是在单击时初始化:)

\n\n

请注意，我仅使用 rowlink css（而不是 js）作为指针和链接样式。

\n\n

<html>\n<head>\n    <link href="css/bootstrap.css" rel="stylesheet">\n</head>\n<body>\n<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">\n<tbody>\n    <tr class="rowlink">\n        <td>\n            <div class="dropdown">\n                <a class="dropdown-toggle rowlink" data-toggle="dropdown" href="#">\n                    Click For Dropdown Menu\n                </a>\n                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">\n                    <li>\n                        <a tabindex="-1" href="#">\n                            Action\n                        </a>\n                    </li>\n                    <li>\n                        <a tabindex="-1" href="#">\n                            Another action\n                        </a>\n                    </li>\n                </ul>\n            </div>\n        </td>\n        <td>\n            Click For Dropdown Menu\n        </td>    \n    </tr>\n    <tr><td>Cell</td><td>Cell</td></tr>         \n</tbody>\n</table>\xe2\x80\x8b\n\n<script src="js/jquery.js"></script>\n<script src="js/bootstrap-dropdown.js"></script>\n\n<script>\n    $(function() {\n        $(this).find(\'.dropdown-toggle\').dropdown();\n\n        $(\'.rowlink\').on(\'click\', function(e) {\n            $(this).find(\'.dropdown\').toggleClass(\'open\');\n            e.stopPropagation();\n        });\n    });\n</script>\n\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

PS 这个 jsfiddle 一直让我的浏览器崩溃:s

\n

Answer 3

小智 5

组

<td style="overflow:visible">

Run Code Online (Sandbox Code Playgroud)

有用。

归档时间：	12 年，10 月前
查看次数：	31596 次
最近记录：	6 年，3 月前