Question

每个人都知道当用户点击下拉菜单时下拉菜单如何工作，它会显示一个下拉列表，用户可以从列表中选择一个选项。我想知道的是，除了显示下拉列表外，还有一种方法可以显示网格，而不是网格中的选项吗？我没有得到任何代码，但如果有人知道这是可能的，并且可以提供一个这样的例子，我会非常非常的，这将是非常有帮助的。

Answer 1

......好吧，没有“网格”这样的东西，但是表格会以'网格'的形式呈现信息。你可以用div元素构建一个网格，但这可能会过度繁琐。

感觉就像使用jQuery一样？

/* make  button clickable */
$("#someButton").click( function(){
   /* grid like container of data, talbe or a complex div 'structure' */
   $("#someGrid").toggle() // if grid is visible hide it, if hidden show it

})

...所以你有一个id为“someButton”的按钮，以及id为“someGrid”和css为“display：none”的网格结构/包装。

Answer 2

这是一个基本的例子：

http://jsfiddle.net/QmLmC/

<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
    <div>
        <button type="button">Open/Close</button>
    </div>
    <table border="1">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</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网格

2 个答案: