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

问题描述

我有一个朋友给我的手风琴文件.这正是我所要求的，带有不使用 javascript 的渐变标题栏的手风琴.我没有提到我需要手风琴垂直而不是水平打开，我希望它在点击时打开而不是悬停.他是一个知识渊博的朋友，但不知道如何实现这一目标.

我的 CSS

.horizo​​ntalaccordion>ul {边距:0；填充:0；列表样式:无；高度:300px；}.horizo​​ntalaccordion>ul>li {显示:块；溢出:隐藏；向左飘浮;边距:0；填充:0；列表样式:无；宽度:40px；高度:300px；/* 装饰性 CSS */背景:#f0f0f0；/* CSS3 过渡 */过渡:宽度 0.3s 缓入缓出；-moz-transition:宽度 0.3s 缓入缓出；-webkit-transition:宽度 0.3s 缓入缓出；-o-transition: 宽度 0.3s 缓入缓出；}.horizo​​ntalaccordion>ul>li>h3{显示:块；向左飘浮;边距:0；填充:10px；高度:19px；宽度:280px；/* 装饰性 CSS */左边框:#f0f0f0 1px 实心；字体系列:Arial、Helvetica、sans-serif；文字装饰:无；文本转换:大写；颜色:#fff;背景:#cccccc;/* CSS3 变换旋转 &翻译 */空白:nowrap;-moz-transform: 旋转 (90.0deg) 平移 (-40px,0px);/* FF3.5+ */-moz-transform-origin: 0 100%;-o-变换:旋转(90.0度)平移(-40px，0px)；/* 歌剧 10.5 */-o-transform-origin: 0 100%;-webkit-transform: 旋转 (90.0deg) 平移 (-40px,0px);/* Saf3.1+, 铬 */-webkit-transform-origin: 0 100%;变换:旋转(90.0度)平移(-40px，0px)；/* Saf3.1+, 铬 */变换原点:0 100%；过滤器:程序:DXImageTransform.Microsoft.BasicImage(旋转= 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-线性渐变(顶部，#002299，#0022cc)；背景:-webkit-gradient(线性，左上，左下，从(#001199)，到(#0011cc))；}.horizo​​ntalaccordion>ul>li>div {显示:无；向左飘浮;溢出:自动；位置:相对；顶部:-40px；左:40px；*顶部:0像素；/* IE7 破解 */*左:0像素；/* IE7 破解 */保证金:0;宽度:320px；高度:280px；填充:10px；}.horizo​​ntalaccordion>ul>li:hover {溢出:隐藏；宽度:380px；}.horizo​​ntalaccordion:hover>ul>li:hover>div {显示:块；}.horizo​​ntalaccordion:hover>ul>li:hover>h3 {/* 装饰性 CSS */颜色:#fff;背景:#000000；/* CSS3 渐变效果 */背景:-moz-线性渐变(顶部，#000090，#000022)；/* FF, 群*/背景:-webkit-gradient(线性，左上，左下，从(#000090)，到(#000022))；/* Safari, 铬 */过滤器:程序:DXImageTransform.Microsoft.BasicImage(旋转= 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 {游标:指针；}

我的 HTML

<ul><li><h3>标题</h3><div>内容<br/><中心><a href="#">链接</a></center></div><li><h3>标题</h3><div>内容<br/><中心><a href="#">链接</a></center></div><li><h3>标题</h3><div>内容<br/><中心><a href="#">链接</a></center></div><li><h3>标题</h3><div>内容<br/><中心><a href="#">链接</a></center></div>

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

解决方案

点击 - 切换动画手风琴(无 JS)

.ulAcc{宽度:300px；列表样式:无；填充:0;保证金:0;}.ulAcc li>标签 + 输入{显示:无；}.ulAcc li>标签{显示:块；文本转换:大写；颜色:#fff;填充:10px；背景:#0022cc；背景:-moz-线性渐变(顶部，#002299，#0022cc)；背景:-webkit-gradient(线性，左上，左下，从(#001199)，到(#0011cc))；}.ulAcc li>div{溢出:隐藏；高度:0px；背景:#ccc;过渡:高度 0.3s 缓入缓出；-o-transition:高度 0.3s 缓入缓出；-moz-transition:高度 0.3 秒缓入缓出；-webkit-transition:高度 0.3s 缓入缓出；}.ulAcc li>标签 + 输入:选中 + div{高度:300px；}

<li><label for="a1">HEADER</label><input id="a1" type="radio" name="toggle"><div>内容</div><li><label for="a2">HEADER</label><input id="a2" type="radio" name="toggle"><div>内容</div><li><label for="a3">HEADER</label><input id="a3" type="radio" name="toggle"><div>内容</div><li><label for="a4">HEADER</label><input id="a4" type="radio" name="toggle"><div>内容</div>

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>

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