如何在没有 jQuery 的情况下在 HTML 中创建手风琴菜单 [英] How to create an accordion menu in HTML without jQuery
本文介绍了如何在没有 jQuery 的情况下在 HTML 中创建手风琴菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何用纯 HTML 制作手风琴?
How can I make an accordion in plain HTML?
- <table border="1">
<tr>
<th><input name="checkbox" type="checkbox" id="selectall"/></th>
<th>Multipal Row </th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>First Chek </td>
<td>1</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="13"/></td>
<td>Thirty Chek </td>
<td>13</td>
</tr> </table>
推荐答案
你总是可以使用普通的 HTML5 details
元素.这是一个仅包含 HTML 的最小示例:
You could always use the plain HTML5 details
element. Here's a minimal example with just HTML:
<details>
<summary>This is the title of the details tag</summary>
<p>Here's a paragraph inside a details element</p>
Here's some text after the paragraph
</details>
这是另一个使用 CSS 的示例:
Here's another example with CSS:
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: .75em .75em 0;
}
summary {
font-weight: bold;
margin: -.75em -.75em 0;
padding: .75em;
background-color: steelblue;
color: white;
}
details[open] {
padding: .75em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .75em;
}
<details>
<summary>Details</summary>
Something that's hidden by default.
</details>
这篇关于如何在没有 jQuery 的情况下在 HTML 中创建手风琴菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文