html - 如何在点击时切换 CSS3 Accordion

Question

我有一个 friend 给我的 Accordion 文件。这正是我所要求的，一个不使用 javascript 的带有渐变标题栏的 Accordion 。我没有提到我需要 Accordion 垂直打开而不是水平打开，我希望它在单击而不是悬停时打开。他是一位知识渊博的 friend ，但不确定如何实现这一目标。

我的 CSS

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    height: 300px;
}

.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
    width:40px;
    height: 300px;

    /* Decorative CSS */
    background:#f0f0f0;

    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 {
    display:block;
    float:left;
    margin: 0;
    padding:10px;
    height:19px;
    width:280px;

    /* Decorative CSS */
    border-left:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    background:#cccccc;

    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002299, endColorstr=#ff0022cc);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002299, endColorstr=#ff0022cc)"; /* IE8 */

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #002299, #0022cc);
    background: -webkit-gradient(linear, left top, left bottom, from(#001199), to(#0011cc));
}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
    overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
}

.horizontalaccordion>ul>li:hover {
    overflow: hidden;
    width: 380px;
}

.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background:#000000;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #000090, #000022); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#000090), to(#000022)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000090, endColorstr=#ff000022); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff000090, endColorstr=#ff000022)";   /* IE 8 */
}

.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}

我的 HTML

<div class="horizontalaccordion">
<ul>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a>
            </center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a>
        </center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
<a href="#">Link</a></center></div>
    </li>
    <li>
        <h3>Header</h3>
        <div>
            Content
            <br /><center>
        <a href="#">Link</a> </center></div>
    </li>
</ul>
</div>

如果有人能帮我把这东西翻过来，我将不胜感激。

Answer 1

点击 - 切换动画 Accordion (无 JS)

.ulAcc{
  width:300px;
  list-style:none;
  padding:0;
  margin:0;
}
.ulAcc li > label + input{
  display:none;
}
.ulAcc li > label{
  display:block;
  text-transform:uppercase;
  color:#fff;
  padding:10px;
  background:  #0022cc;
  background: -moz-linear-gradient( top, #002299, #0022cc);
  background: -webkit-gradient(linear, left top, left bottom, from(#001199), to(#0011cc));
}
.ulAcc li > div{
  overflow:hidden;
  height:0px;
  background:#ccc;
  transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
}
.ulAcc li > label + input:checked + div{
  height:300px;
}

<ul class="ulAcc">
      <li>
          <label for="a1">HEADER</label><input id="a1" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a2">HEADER</label><input id="a2" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a3">HEADER</label><input id="a3" type="radio" name="toggle">
          <div>Content</div>
      </li>
      <li>
          <label for="a4">HEADER</label><input id="a4" type="radio" name="toggle">
          <div>Content</div>
      </li>
</ul>