html - 有没有办法显示html网格

标签 html grid

每个人都知道下拉菜单的工作原理,用户单击下拉菜单会显示一个下拉列表,用户可以从列表中选择一个选项。我想知道的是,在 html 中是否有一种方法,除了显示下拉列表外,我可以显示一个网格而不是网格中的选项?我没有这方面的任何代码,但如果有人知道这是可能的并且可以提供一个例子,我将非常感激,这将非常有帮助。

最佳答案

这是一个基本的例子:

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 - 有没有办法显示html网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8420294/

相关文章:

html - 框阴影不超过包含元素的背景颜色

html - Dreamweaver "upwards"是否与手动创建的语义 html 兼容?

javascript - animatedModal.js 的对话框使链接不可点击(即使它有 z-index :-9999)

javascript - Shield UI XML 内联编辑

java - 瓦丁组合框 : Select date of birth?

extjs - 记住列宽、位置和(in)可见

javascript - 如果我有 5 个具有相同 CLASS 的按钮,我可以使用 javascript onclick 来获取 ID 吗?

html - 在多个图像的右侧对齐文本

html - Bootstrap Card Grid 的问题

wpf - 当其他列的内容折叠时,网格列不填充剩余空间