如何在沒有jQuery的情況下在HTML中創建手風琴菜單

Question

如何在純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="2"/></td> 
     <td>Second Chek </td> 
     <td>2</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> 
     <td>Third Chek </td> 
     <td>3</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> 
     <td>Fourth Chek </td> 
     <td>4</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> 
     <td>Five Chek </td> 
     <td>5</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="6"/></td> 
     <td>Six Chek </td> 
     <td>6</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="7"/></td> 
     <td>Seven Chek </td> 
     <td>7</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="8"/></td> 
     <td>Eight Chek </td> 
     <td>8</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="9"/></td> 
     <td>Nine Chek </td> 
     <td>9</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="10"/></td> 
     <td>Ten Chek </td> 
     <td>10</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="11"/></td> 
     <td>Elevan Chek </td> 
     <td>11</td> 
     </tr> 
     <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="12"/></td> 
     <td>Twel Chek </td> 
     <td>12</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> 

Answer 1

我想你應該看看jQuery UI的。

http://docs.jquery.com/UI/Accordion

Answer 2

試試這個

http://csswizardry.com/2011/02/pure-css3-accordion/

Answer 3

如果你不喜歡的jQuery，檢查出Uranium - 你不需要使用任何JavaScript和只需要添加一些屬性到你的HTML。

Answer 4

手風琴唯一的HTML這裏的鏈接列表：

1>http://media02.hongkiat.com/css-based-accordion/demo/index.html。

2>http://andornagy.com/pure-css-accordion/

3>http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Answer 5

我建議以下教程：https://codepen.io/abergin/pen/ihlDf?editors=1100#0它正是你想要的。

的HTML代碼：

<h1>CSS + HTML only Accordion Element</h1> 
<ul> 
    <li> 
    <input type="checkbox" checked> 
    <i></i> 
    <h2>Languages Used</h2> 
    <p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p> 
    </li> 
    <li> 
    <input type="checkbox" checked> 
    <i></i> 
    <h2>How it Works</h2> 
    <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p> 
    </li> 
    <li> 
    <input type="checkbox" checked> 
    <i></i> 
    <h2>Points of Interest</h2> 
    <p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p> 
    </li> 
</ul> 

而且較重的使用CSS：

$white: rgba(254,255,250,1) 
$grey: rgba(220,231,235,1) 
$red: rgba(255,104,115,1) 
$black: rgba(48,69,92,0.8) 
$sans: 'Titillium Web', sans-serif 

.transition 
    transition: all 0.25s ease-in-out 

.flipIn 
    animation: flipdown 0.5s ease both 

.no-select 
    -webkit-tap-highlight-color: rgba(0,0,0,0) 
    -webkit-touch-callout: none 
    -webkit-user-select: none 
    -khtml-user-select: none 
    -moz-user-select: none 
    -ms-user-select: none 
    user-select: none 

html 
    width: 100% 
    height: 100% 
    perspective: 900 
    overflow-y: scroll 
    background-color: $grey 
    font-family: $sans 
    color: $black 

body 
    min-height: 0 
    display: inline-block 
    position: relative 
    left: 50% 
    margin: 90px 0 
    transform: translate(-50% , 0) 
    box-shadow: 0 10px 0 0 $red inset 
    background-color: $white 
    max-width: 450px 
    padding: 30px 

    @media (max-width:550px) 
    box-sizing: border-box 
    transform: translate(0 , 0) 
    max-width: 100% 
    min-height: 100% 
    margin: 0 
    left: 0 

h1 , h2 
    color: $red 

h1 
    text-transform: uppercase 
    font-size: 36px 
    line-height: 42px 
    letter-spacing: 3px 
    font-weight: 100 
    @extend .flipIn 

h2 
    font-size: 26px 
    line-height: 34px 
    font-weight: 300 
    letter-spacing: 1px 
    display: block 
    background-color: $white 
    margin: 0 
    cursor: pointer 
    @extend .no-select 

p 
    color: $black 
    font-size: 17px 
    line-height: 26px 
    letter-spacing: 1px 
    position: relative 
    overflow: hidden 
    max-height: 800px 
    @extend .transition 
    opacity: 1 
    transform: translate(0 , 0) 
    margin-top: 14px 
    z-index: 2 

ul 
    list-style: none 
    perspective: 900 
    padding: 0 
    margin: 0 

    li 
    position: relative 
    padding: 0 
    margin: 0 
    padding-bottom: 4px 
    padding-top: 18px 
    border-top: 1px dotted $grey 
    @extend .flipIn 

    &:nth-of-type(1) 
     animation-delay: 0.5s 

    &:nth-of-type(2) 
     animation-delay: 0.75s 

    &:nth-of-type(3) 
     animation-delay: 1.0s 

    &:last-of-type 
     padding-bottom: 0 

    i 
     position: absolute 
     transform: translate(-6px , 0) 
     margin-top: 16px 
     right: 0 

     &:before , &:after 
     content: "" 
     @extend .transition 
     position: absolute 
     background-color: $red 
     width: 3px 
     height: 9px 

     &:before 
     transform: translate(-2px , 0) rotate(45deg) 

     &:after 
     transform: translate(2px , 0) rotate(-45deg) 

    input[type=checkbox] 
     position: absolute 
     cursor: pointer 
     width: 100% 
     height: 100% 
     z-index: 1 
     opacity: 0 

     &:checked 
     &~p 
      margin-top: 0 
      max-height: 0 
      opacity: 0 
      transform: translate(0 , 50%) 

     &~i 
      &:before 
      transform: translate(2px , 0) rotate(45deg) 

      &:after 
      transform: translate(-2px , 0) rotate(-45deg) 

@keyframes flipdown 
    0% 
    opacity: 0 
    transform-origin: top center 
    transform: rotateX(-90deg) 
    5% 
    opacity: 1 
    80% 
    transform: rotateX(8deg) 
    83% 
    transform: rotateX(6deg) 
    92% 
    transform: rotateX(-3deg) 
    100% 
    transform-origin: top center 
    transform: rotateX(0deg)