twitter-bootstrap Bootstrap 中表格行的下拉菜单

Question

提问by SkynetWebS

I'm trying to get a dropdown menu working from a table row using the Jasny extension found http://www.jasny.net/bootstrap/javascript/#rowlink. Unfortunately I can't seem to get it to work to display a dropdown. I have en example of what I've done so far:

我正在尝试使用在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>?

Clicking row will follow href link, instead of displaying the dropdown menu. I can get the rowlink extension to work as a link or to call a modal window. I can also get a dropdown to come from a single cell (without jasny extension), but would like it to work from the whole row.

单击行将跟随 href 链接，而不是显示下拉菜单。我可以将 rowlink 扩展用作链接或调用模式窗口。我还可以从单个单元格（没有 jasny 扩展名）中获取下拉列表，但希望它可以在整行中工作。

Answer 1

回答by Shital Shah

Bootstrap 3.x

引导程序 3.x

By default Bootstrap dropdowns inside a table cell doesn't show up properly (they would show up at the bottom of the page). To fix this you need to set class for the container as dropdown. For table cells, this would look like this:

默认情况下，表格单元格内的 Bootstrap 下拉菜单无法正确显示（它们会显示在页面底部）。要解决此问题，您需要将容器的类设置为下拉列表。对于表格单元格，这看起来像这样：

<td class="dropdown">

DEMO: http://jsfiddle.net/sytelus/kzxes29r/

演示：http: //jsfiddle.net/sytelus/kzxes29r/

PS: If you don't want to change style for table cell, you can also create a div inside cell and set its class to "dropdown".

PS：如果你不想改变表格单元格的样式，你也可以在单元格内部创建一个div并将其类设置为“下拉”。

Answer 2

回答by user2564293

set

放

<td style="overflow:visible">

it works.

有用。

Answer 3

回答by Arnold Daniels

Unfortunately rowlink only works with the href and doesn't propogate js events. So it can't be used for dropdowns.

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

Having a closer look dropdown code, shows that after the dropdown is initialized a click on dropdown-toggle doesn't do much more than toggle the 'open' class. We can easily mimic that. Now we just need to make sure dropdown is initialized on load instead of on click and presto :)

仔细查看下拉代码，表明在下拉列表初始化后，单击下拉菜单切换不会比切换“打开”类更多。我们可以很容易地模仿它。现在我们只需要确保下拉菜单在加载时初始化，而不是点击和快速初始化:)

Note that I'm only using the rowlink css (not js) for the pointer and link style.

请注意，我仅将 rowlink css（而非 js）用于指针和链接样式。

<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<tbody>
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle rowlink" 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>?

<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>

<script>
    $(function() {
        $(this).find('.dropdown-toggle').dropdown();

        $('.rowlink').on('click', function(e) {
            $(this).find('.dropdown').toggleClass('open');
            e.stopPropagation();
        });
    });
</script>

</body>
</html>

P.S. This jsfiddle kept crashing my browser :s

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

Answer 4

回答by ErickBest

You might try this::

你可以试试这个::

    <!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
 <tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
   <a href="/default.asp">Tutorials</a><br>
   <table class="menu" id="tutorials" width="120">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   <a href="/default.asp">Scripting</a><br>
   <table class="menu" id="scripting" width="120">
   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   <a href="/site/site_validate.asp">Validation</a><br>
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
   <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
   </table>
  </td>
 </tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

twitter-bootstrap Bootstrap 中表格行的下拉菜单

提问by SkynetWebS

回答by Shital Shah

回答by user2564293

回答by Arnold Daniels

回答by ErickBest

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap 中表格行的下拉菜单

提问by SkynetWebS

回答by Shital Shah

回答by user2564293

回答by Arnold Daniels

回答by ErickBest

相关推荐

twitter-bootstrap Twitter BootStrap 的画布布局

twitter-bootstrap 关于悬停和焦点的 Twitter Bootstrap 工具提示

twitter-bootstrap Bootstrap 主题 - variables.less - Bootswatch

twitter-bootstrap Twitter Bootstrap Datepicker 不会更新输入值

相关推荐

最近更新

标签