ul-li切換時數據表移位
[英]datatable shifts when ul-li toggles
問題描述
我正在使用數據表和選擇列表，問題是每當我切換選擇列表時，它就會向下移動數據表。 我的要求是，在數據表上打開選擇列表。 我必須使用ul-li選擇框，因為我不能使用<選擇>控件，因為選擇框不允許在<選項>標記中插入圖像
JSFIDDLE是鏈接
去小提琴鏈接
$(document).ready(function() { $('#example').dataTable({"sPaginationType": "full_numbers"}); $('.watchlist ul li.option').click(function() { $(this).siblings().children().remove(); // $(this).siblings().children().remove(); $(this).siblings().toggle(); // console.log($(a).is(":visible")); $(this).siblings('li[values!=null]').append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">'); // $(this).next().children().remove(); // $(this).addClass('darr'); //alert($(this).attr("values")); }) $(document).on('click','img',function() { //alert($(this).parent().attr('values')) //$(this).parent().remove(); var val=$(this).parent().attr('values'); }) });
.watchlist ul li.option { background-color: #DEDEDE; box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE; -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE; -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE; } .watchlist ul li.option:hover { background-color: #B8B8B8; } .watchlist ul li.option { z-index: 1; padding: 5px; display: none; } .watchlist ul li:first-child { display: block; } .watchlist ul li { cursor: default; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Example 1 - apply dataTable()</title> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script> </head> <body> <div id ="watchlist" style="min-width:100px;z-index:-1;" class="watchlist" > <ul style="width:100px;padding-left:0px;overflow:auto;word-wrap: break-word; display: inline-block;list-style: none;"> <li values="null" class="option">PR</li> <li values="1" class="option">Dropdown one</li> <li values="2" class="option">Dropdown two</li> <li values="3" class="option">Dropdown three</li> <li values="5" class="option">Dropdown fgdgd</li> <li values="6" class="option">Dropdown hnfgfhffffffffffdddddddddddddddddddddffffffffffffffffffddffffffff</li> </ul> </div> <div class="container"> <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td> 4</td> <td>X</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td>5</td> <td>C</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td>5.5</td> <td>A</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td>6</td> <td>A</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td>7</td> <td>A</td> </tr> <tr> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td>6</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td>1.7</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td>1.9</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Camino 1.0</td> <td>OSX.2+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td>1.7</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Netscape Browser 8</td> <td>Win 98SE+</td> <td>1.7</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Netscape Navigator 9</td> <td>Win 98+ / OSX.2+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.0</td> <td>Win 95+ / OSX.1+</td> <td>1</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.1</td> <td>Win 95+ / OSX.1+</td> <td>1.1</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.2</td> <td>Win 95+ / OSX.1+</td> <td>1.2</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.3</td> <td>Win 95+ / OSX.1+</td> <td>1.3</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.4</td> <td>Win 95+ / OSX.1+</td> <td>1.4</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.5</td> <td>Win 95+ / OSX.1+</td> <td>1.5</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.6</td> <td>Win 95+ / OSX.1+</td> <td>1.6</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.7</td> <td>Win 98+ / OSX.1+</td> <td>1.7</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.8</td> <td>Win 98+ / OSX.1+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Seamonkey 1.1</td> <td>Win 98+ / OSX.2+</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Gecko</td> <td>Epiphany 2.20</td> <td>Gnome</td> <td>1.8</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>Safari 1.2</td> <td>OSX.3</td> <td>125.5</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>Safari 1.3</td> <td>OSX.3</td> <td>312.8</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>Safari 2.0</td> <td>OSX.4+</td> <td>419.3</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>Safari 3.0</td> <td>OSX.4+</td> <td>522.1</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>OmniWeb 5.5</td> <td>OSX.4+</td> <td>420</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>iPod Touch / iPhone</td> <td>iPod</td> <td>420.1</td> <td>A</td> </tr> <tr> <td>Webkit</td> <td>S60</td> <td>S60</td> <td>413</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 7.0</td> <td>Win 95+ / OSX.1+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 7.5</td> <td>Win 95+ / OSX.2+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 8.0</td> <td>Win 95+ / OSX.2+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 8.5</td> <td>Win 95+ / OSX.2+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 9.0</td> <td>Win 95+ / OSX.3+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 9.2</td> <td>Win 88+ / OSX.3+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera 9.5</td> <td>Win 88+ / OSX.3+</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Opera for Wii</td> <td>Wii</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Nokia N800</td> <td>N800</td> <td>-</td> <td>A</td> </tr> <tr> <td>Presto</td> <td>Nintendo DS browser</td> <td>Nintendo DS</td> <td>8.5</td> <td>C/A<sup>1</sup></td> </tr> <tr> <td>KHTML</td> <td>Konqureror 3.1</td> <td>KDE 3.1</td> <td>3.1</td> <td>C</td> </tr> <tr> <td>KHTML</td> <td>Konqureror 3.3</td> <td>KDE 3.3</td> <td>3.3</td> <td>A</td> </tr> <tr> <td>KHTML</td> <td>Konqureror 3.5</td> <td>KDE 3.5</td> <td>3.5</td> <td>A</td> </tr> <tr> <td>Tasman</td> <td>Internet Explorer 4.5</td> <td>Mac OS 8-9</td> <td>-</td> <td>X</td> </tr> <tr> <td>Tasman</td> <td>Internet Explorer 5.1</td> <td>Mac OS 7.6-9</td> <td>1</td> <td>C</td> </tr> <tr> <td>Tasman</td> <td>Internet Explorer 5.2</td> <td>Mac OS 8-X</td> <td>1</td> <td>C</td> </tr> <tr> <td>Misc</td> <td>NetFront 3.1</td> <td>Embedded devices</td> <td>-</td> <td>C</td> </tr> <tr> <td>Misc</td> <td>NetFront 3.4</td> <td>Embedded devices</td> <td>-</td> <td>A</td> </tr> <tr> <td>Misc</td> <td>Dillo 0.8</td> <td>Embedded devices</td> <td>-</td> <td>X</td> </tr> <tr> <td>Misc</td> <td>Links</td> <td>Text only</td> <td>-</td> <td>X</td> </tr> <tr> <td>Misc</td> <td>Lynx</td> <td>Text only</td> <td>-</td> <td>X</td> </tr> <tr> <td>Misc</td> <td>IE Mobile</td> <td>Windows Mobile 6</td> <td>-</td> <td>C</td> </tr> <tr> <td>Misc</td> <td>PSP browser</td> <td>PSP</td> <td>-</td> <td>C</td> </tr> <tr> <td>Other browsers</td> <td>All others</td> <td>-</td> <td>-</td> <td>U</td> </tr> </tbody> </table> </div> </body>
1 個解決方案
解決方案1
1 已采納 2016-07-14 07:47:13
您可以發揮position 。 參見小提琴http://jsfiddle.net/UvjnT/948/
在選擇列表上添加position:absolute ，並賦予z-index屬性以顯示在數據表上方。
如何使用 jQuery 創建帶有 JSON 輸入的 ul-li 結構？
[英]How can I create a ul-li structure with JSON input with jQuery?
如何使用Javascript在UL-LI塊中進行簡單的DOM操作？
[英]How can do simple DOM -manipulation in UL-LI -block with Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.