如何在Click上切换CSS3手风琴 [英] How to Toggle CSS3 Accordion on Click

查看：95
本文介绍了如何在Click上切换CSS3手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个朋友给我的手风琴文件。这正是我所要求的，带有梯度标题栏的手风琴，它不使用JavaScript。我没有提到我需要手风琴垂直打开而不是水平打开，并且我希望它能在点击不打开时打开。他是一位知识渊博的朋友，但不知道如何做到这一点。

我的CSS 

  .horizo​​ntalaccordion> ul {
保证金：0; 
 padding：0; 
 list-style：none; 
 height：300px; 
} 
 
 .horizo​​ntalaccordion> ul> li {
 display：block; 
 overflow：hidden; 
 float：left; 
保证金：0; 
 padding：0; 
 list-style：none; 
 width：40px; 
 height：300px; 
 
 / *装饰CSS * / 
背景：＃f0f0f0; 
 
 / * CSS3转换* / 
转换：宽度0.3s缓出; 
 -moz-transition：宽度0.3s缓出; 
 -webkit-transition：宽度0.3s缓出; 
 -o-transition：宽度0.3s缓出; 
} 
 
 .horizo​​ntalaccordion> ul> li> h3 {
 display：block; 
 float：left; 
保证金：0; 
 padding：10px; 
 height：19px; 
 width：280px; 
 
 / *装饰CSS * / 
 border-left：＃f0f0f0 1px solid; 
 font-family：Arial，Helvetica，sans-serif; 
 text-decoration：none; 
 text-transform：大写; 
颜色：#fff; 
背景：#cccccc; 
 
 / * CSS3变换旋转&翻译* / 
 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渐变效果* / 
背景：-moz-linear-gradient（top，＃002299，＃0022cc）; 
 background：-webkit-gradient（线性，左上角，左下角，从（＃001199）到（＃0011cc））; 
} 
 
 .horizo​​ntalaccordion> ul> li> div {
 display：none; 
 float：left; 
溢出：auto; 
职位：亲属; 
 top：-40px; 
 left：40px; 
 * top：0px; / * IE7 Hack * / 
 * left：0px; / * IE7 Hack * / 
 margin：0; 
 width：320px; 
 height：280px; 
 padding：10px; 
} 
 
 .horizo​​ntalaccordion> ul> li：hover {
 overflow：hidden; 
 width：380px; 
} 
 
 .horizo​​ntalaccordion：hover> ul> li：hover> div {
 display：block; 
} 
 
 .horizo​​ntalaccordion：hover> ul> li：hover> h3 {
 / *装饰CSS * / 
颜色：#fff; 
背景：＃000000; 
 
 / * CSS3渐变效果* / 
 background：-moz-linear-gradient（top，＃000090，＃000022）; / * FF，Flock * / 
 background：-webkit-gradient（线性，左上，左下，从（＃000090）到（＃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 * / 
} 
 
 .horizo​​ntalaccordion> ul> li> h3：hover {
 cursor：pointer; 
}

我的HTML 

 < div class =horizo​​ntalaccordion> 
< ul> 
< li> 
< h3>标头< / h3> 
< div> 
内容
< br /><中心> 
< a href =＃>连结< / a> 
< / center>< / div> 
< / li> 
< li> 
< h3>标头< / h3> 
< div> 
内容
< br /><中心> 
< a href =＃>连结< / a> 
< / center>< / div> 
< / li> 
< li> 
< h3>标头< / h3> 
< div> 
内容
< br /><中心> 
< a href =＃>连结< / a>< / center>< / div> 
< / li> 
< li> 
< h3>标头< / h3> 
< div> 
内容
< br /><中心> 
< a href =＃>连结< / a> < /中心]，[< / DIV> 
< / li> 
< / ul> 
< / div>

如果有人可以帮我翻转这个东西，我会很感激。

解决方案

点击 - 切换动画手风琴（不含JS）


$ b 

  .ulAcc {width：300px;列表样式：无;填充：0; margin：0;}。ulAcc li> label + input {display：none;}。ulAcc li> label {display：block;文本转换：大写;颜色：#FFF;填充：10px的;背景：＃0022cc;背景：-moz-linear-gradient（top，＃002299，＃0022cc）;背景：-webkit-gradient（线性，左上角，左下角，从（＃001199）到（＃0011cc））;}。ulAcc li> div {overflow：hidden;高度：0像素;背景：#CCC;过渡：高度0.3s缓出; -o-transition：高度0.3s缓出; -moz-transition：高度0.3s缓出; -webkit-transition：height 0.3s ease-in-out;}。ulAcc li> label + input：checked + div {height：300px;}

< ul class =ulAcc> <李> < label for =a1> HEADER< / label>< input id =a1type =radioname =toggle> < DIV>内容< / DIV> < /锂> <李> < label for =a2> HEADER< / label>< input id =a2type =radioname =toggle> < DIV>内容< / DIV> < /锂> <李> < label for =a3> HEADER< / label>< input id =a3type =radioname =toggle> < DIV>内容< / DIV> < /锂> <李> < label for =a4> HEADER< / label>< input id =a4type =radioname =toggle> < DIV>内容< / DIV> < / li>< / ul>

I have an accordion file that a friend gave me. It is exactly what I asked for, an accordion with gradient title bars that does not use javascript. I failed to mention that I needed the accordion to open vertically and not horizontally, and that I wanted it to open on click not hover. He is a knowledgeable friend, but wasn't sure how to achieve this.

My 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;
}

My 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>

If anyone can help me flip this thing on it's side, I'd appreciate it.

解决方案

Click - toggle animate accordion (without 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>

这篇关于如何在Click上切换CSS3手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆