Есть ли способ отобразить HTML-сетку

Question

Все знают, как работает раскрывающееся меню, когда человек щелкает раскрывающееся меню и отображает раскрывающийся список, в котором пользователь может выбрать опцию из списка. То, что я хочу знать, это то, что есть способ в html, где, кроме отображения раскрывающегося списка, я могу вместо этого отображать сетку с параметрами в сетке? У меня не было никакого кода для этого, но если кто-то знает, что это возможно, и могу привести пример этого, я был бы очень признателен, и это было бы очень полезно.

Answer 1

Вот базовый пример:

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();

});

Answer 2

... ну, нет такой вещи как «сетка», но таблица будет представлять информацию в форме «сетки».Вы могли бы построить сетку из элементов 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

})

... так что у вас будет кнопка сидентификатор «someButton» и любую структуру / оболочку сетки с идентификатором id «someGrid» и css «display: none».