每个人都知道下拉菜单的工作原理,用户单击下拉菜单会显示一个下拉列表,用户可以从列表中选择一个选项。我想知道的是,在 html 中是否有一种方法,除了显示下拉列表外,我可以显示一个网格而不是网格中的选项?我没有这方面的任何代码,但如果有人知道这是可能的并且可以提供一个例子,我将非常感激,这将非常有帮助。
最佳答案
这是一个基本的例子:
<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
<div>
<button type="button">Open/Close</button>
</div>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p>Click the button above to view open or close the grid.</p>
.
/* CSS */
.dropdownGrid{position:relative;}
.dropdownGrid table{position:absolute; z-index:999; display:none;}
.dropdownGrid td{width:20px; height:20px; background-color:white;}
.dropdownGrid td:hover{background-color:blue;}
.
// Javascript using jQuery
$("#myDropdownGrid button").click( function(){
$('#myDropdownGrid table').toggle();
});
关于html - 有没有办法显示html网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8420294/