3

http://www.jasny.net/bootstrap/components/#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>​

行をクリックすると、ドロップダウン メニューが表示される代わりに、href リンクが表示されます。rowlink 拡張機能をリンクとして機能させたり、モーダル ウィンドウを呼び出したりすることができます。単一のセル (jasny 拡張機能なし) からドロップダウンを取得することもできますが、行全体から機能させたいと考えています。

4

4 に答える 4

7

設定

<td style="overflow:visible">

できます。

于 2013-07-09T11:21:13.080 に答える
0

あなたはこれを試すかもしれません::

    <!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>
于 2013-05-31T16:19:27.707 に答える