Fatal编程技术网

Twitter bootstrap 引导中表格行的下拉菜单

twitter-bootstrap drop-down-menu

Twitter bootstrap 引导中表格行的下拉菜单,twitter-bootstrap,drop-down-menu,html-table,row,jasny-bootstrap,Twitter Bootstrap,Drop Down Menu,Html Table,Row,Jasny Bootstrap,我正在尝试使用找到的Jasny扩展从表行获得一个下拉菜单。不幸的是，我似乎无法让它显示下拉列表。我举了一个我迄今为止所做工作的例子： <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"> <thead> <tr> <th

我正在尝试使用找到的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>​


标题
标题

    

  • 

    • 

  • 

    • 


单击以查看下拉菜单
细胞
细胞
​
单击行将跟随href链接，而不是显示下拉菜单。 我可以让rowlink扩展作为链接或调用模式窗口。
我也可以从单个单元格中获得下拉列表（没有jasny扩展），但我希望它可以从整行开始工作。

不幸的是，rowlink只能与href一起工作，不能传播js事件。所以它不能用于下拉列表

仔细查看下拉列表代码，可以看出，在下拉列表初始化之后，单击下拉列表切换所做的仅仅是切换“打开”类。我们可以很容易地模仿这一点。现在我们只需要确保下拉列表是在加载时初始化的，而不是在单击和presto时初始化：）

注意，对于指针和链接样式，我只使用了行链接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>



    

  • 

    • 

  • 

    • 


单击以查看下拉菜单
细胞
​
$（函数（）{
$（this.find（'.dropdown toggle'）.dropdown（）；
$（'.rowlink'）。在（'click'，函数（e）上{
$（this.find（'.dropdown'）.toggleClass（'open'）；
e、 停止传播（）；
});
});
另外，这个JSFIDLE一直在破坏我的浏览器：S

你可以试试这个：：

    <!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>


正文{字体系列：arial；}
表{字体大小：80%；背景：黑色}
a{颜色：黑色；文本装饰：无；字体：粗体}
a:悬停{color:#606060}
td.菜单{背景：浅蓝色}
餐桌菜单
{
字体大小：100%；
位置：绝对位置；
可见性：隐藏；
}
功能显示菜单（elmnt）
{
document.getElementById（elmnt.style.visibility=“visible”；
}
函数hidemenu（elmnt）
{
document.getElementById（elmnt.style.visibility=“hidden”；
}
下拉菜单






将鼠标悬停在这些选项上以查看下拉菜单
设置
它可以工作。

bootstrap3.x

默认情况下，表格单元格中的引导下拉列表不会正确显示（它们会显示在页面底部）。要解决这个问题，您需要将容器的类设置为下拉列表。对于表格单元格，如下所示：

<td class="dropdown">
演示：

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

谢谢您的回复。不得不承认，对我来说，JSFIDLE也相当迟钝！我也一直在研究这个下拉列表是如何工作的&你的也是如何工作的。我会试试你的代码。：-）它可以工作，但前提是我单击第一个单元格，它也会显示在表的底部！不过这是个好的开始。我想我必须好好玩一玩，看看如何让下拉列表从整行开始工作&显示在当前单击的单元格下方。如果我找到解决办法，我会告诉你的。看到它包含在您的Jasny扩展中供其他人使用会很酷。在网上进行了一次很好的搜索之后，我意识到我不是唯一一个寻找此功能的人！：-）它将在没有太多javascript的情况下为第一个单元格工作。我还应该处理第二个单元格（我用Chrome进行了测试）。这帮助我解决了下拉菜单被隐藏的问题。@TiredOfProgramming上文适用于bootstrap3.x，但不适用于4.x。 
<td class="dropdown">