如何在没有 jQuery 的情况下在 HTML 中创建手风琴菜单 [英] How to create an accordion menu in HTML without jQuery

问题描述

如何用纯 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屋！