下拉菜單從錶行在引導

我試圖從一個表格行使用Jasny擴展找到http://www.jasny.net/bootstrap/javascript/#rowlink下拉菜單。不幸的是，我似乎無法讓它顯示下拉菜單。我有恩例如什麼我迄今所做的：下拉菜單從錶行在引導

<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擴展名），但希望它能夠從整行開始工作。

來源

2012-12-10 SkynetWebS

不幸的是，rowlink只能用於href並且不會傳播js事件。所以它不能用於下拉菜單。

仔細觀察下拉代碼後，顯示在下拉菜單初始化後，點擊下拉菜單並不會比切換「打開」類做得多。我們可以很容易地模仿。現在我們只需要確保下拉是在加載時初始化的，而不是在點擊和快速初始化:)

請注意，我只使用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.這的jsfiddle保持崩潰我的瀏覽器：■

來源

2012-12-10 23:11:13

感謝您的回覆。不得不承認jsfiddle對我來說也相當遲鈍！ – SkynetWebS

我也一直在尋找下拉式如何工作以及您的工作方式。我會給你的代碼一個去。 :-) – SkynetWebS

它的工作原理，但只有當我點擊第一個單元格時，它也會出現在表格的底部！不過這是一個好的開始。我想我必須有一個很好的玩法，看看如何讓整個下拉列表在整行中工作，並出現在當前被點擊的單元格下方。如果我找到解決方案，我會讓你知道。看到它包含在你的Jasny擴展中供其他人使用會很酷。在網絡上進行了很好的搜索之後，我意識到我並不是唯一一個尋找這種功能的人！ :-) – SkynetWebS

你可以試試這個::

<!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-31 16:19:27 ErickBest

設置

<td style="overflow:visible">

它的工作原理。

來源

2013-07-09 11:21:13 user2564293

不，它沒有。看到這個小提琴：http://jsfiddle.net/Sherbrow/unWCN/4/ – ShitalShah

這幫助我解決了隱藏下拉菜單的這個問題。 – mozgras

默認情況下表格單元格內的引導下拉列表不能正確顯示（它們會顯示在頁面的底部）。要解決這個問題，你需要設置容器的類爲下拉菜單。對於表格單元格，這應該是這樣的：

<td class="dropdown">

DEMO： http://jsfiddle.net/Sherbrow/unWCN/4/

PS：如果你不想改變樣式表的單元格，你還可以創建細胞內一個div和設置其類到「下拉」。

來源

2013-12-02 07:16:36 ShitalShah

很好，謝謝！ – k102

根本不起作用 – GordonFreaman

下拉菜單從錶行在引導

回答

相關問題