纯 CSS 手风琴问题 [英] Pure CSS Accordion Issue

问题描述

我在玩纯 CSS 手风琴 http://reversl.net/accordion/ 我可以使基本功能正常工作(标题 2 和 3 都可以切换)但是如果我向其添加相同的 UL，则无法让标题 1 进行切换.因为标题 1 的样式不同，问题(我认为)在于命名/定位它是 + div 吗?

请注意:为了演示，我从标题 1 中删除了 UL，因为它阻止了标题 2 &3 来自切换.

解决方案

您犯了几个错误.数不胜数:

这是一个工作示例:试试看，我改变了什么
http://jsfiddle.net/HerrSerker/ASqE9/

HTML

<div class="accordion"><div id="two" class="section"><h4><a href="#two">标题 2</a><div class="sub_section"><ul class="list"><li>示例文本 1</li><li class="last">示例文本 2</li>
</div><!--#two--><div id="four" class="section progress"><h4><a href="#four">标题 4(带进度条)</a><div class="metrics"><div class="meter"><span style="width: 75%"></span></div><!--.meter--></div><!--.metrics--><div class="sub_section"><ul class="list"><li>示例文本 1</li><li class="last">示例文本 2</li></div><!--.sub_section--></div><!--#one--></div><!--accordian--></div>

<小时>

CSS

 #wrap {宽度:320px；背景:#f0f0f0；保证金:自动；}.手风琴{清楚:两者；填充:0；边距:0 自动；}.accordion h4 {边距:0；}.accordion h4 a {填充:1em；颜色:#999；显示:块；字体粗细:正常；文字装饰:无；}.accordion h4 a:hover {文字装饰:无；背景:#111；}.accordion .section {背景:#222；边框底部:1px 实心 #000；}.accordion .sub_section {边框底部:无；背景:#f0f0f0；}.列表 {填充:0；边距:0；}.list li {背景: url('http://www.placehold.it/40x40') 不重复；颜色:#999；列表样式:无；填充:.7em .7em .7em 4em；边框底部:1px 实心 #fff;}.list .last {边框底部:无；}.accordion .sub_section {高度:0；溢出:隐藏；-webkit-transition:高度 0.3s 缓入；-moz-transition:高度 0.3 秒缓入；-o-transition:高度 0.3s 缓入；-ms-transition:高度 0.3s 缓入；过渡:高度 0.3s 缓入；}.accordion :目标 h4 a {文字装饰:无；字体粗细:粗体；}.accordion :目标 .sub_section {高度:80px；}.accordion .section.large:目标 h4 + div {溢出:自动；}.手风琴 p {颜色:#646464；}.accordion .progress .meter {宽度:90%；高度:2px；位置:相对；背景:#555；边距:-.9em 自动 .5em 自动；填充:1px；}.meter >跨度 {高度:2px；显示:块；背景色:#f0f0f0；位置:相对；溢出:隐藏；}

I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?

Please note: I removed the UL from Heading 1 for the sake of the demo because it was preventing Headings 2 & 3 from toggling.

解决方案

You made several mistakes. Too many to count:

Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/

HTML

<div id="wrap">

<div class="accordion">

    <div id="two" class="section">
        <h4>
            <a href="#two">Heading 2</a>
        </h4>
        <div class="sub_section">
            <ul class="list">
                <li>Sample Text 1</li>
                <li class="last">Sample Text 2</li>
            </ul>
        </div>    
    </div><!--#two-->

    <div id="four" class="section progress">
        <h4>
            <a href="#four">Heading 4 (With Progress Bar)</a>
        </h4>
        <div class="metrics">
            <div class="meter">
                <span style="width: 75%"></span>
            </div><!--.meter-->
        </div><!--.metrics-->
        <div class="sub_section">
            <ul class="list">
                <li>Sample Text 1</li>
                <li class="last">Sample Text 2</li>
            </ul>
        </div><!--.sub_section-->
    </div><!--#one-->


</div><!--accordian-->
</div>​

---

CSS

  #wrap {
      width: 320px;
      background: #f0f0f0;
      margin: auto;
  }

  .accordion {
      clear: both;
      padding: 0;
      margin: 0 auto;
  }

  .accordion h4 {
      margin: 0;
  }

  .accordion h4 a {
      padding: 1em;
      color: #999;
      display: block;
      font-weight: normal;
      text-decoration: none;
  }

  .accordion h4 a:hover {
      text-decoration: none;
      background: #111;
  }

  .accordion .section {
      background: #222;
       border-bottom: 1px solid #000;
  }

  .accordion .sub_section {
       border-bottom: none;
       background: #f0f0f0;
  }

  .list {
      padding: 0;
      margin: 0;
  }

  .list li {
      background: url('http://www.placehold.it/40x40') no-repeat;
      color: #999;
      list-style: none;
      padding: .7em .7em .7em 4em;
      border-bottom: 1px solid #fff;
  }

  .list .last {
      border-bottom: none;
  }

  .accordion .sub_section {
      height: 0;
      overflow: hidden;
      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
  }

    .accordion :target h4 a {
      text-decoration: none;
      font-weight: bold;
  }

  .accordion :target .sub_section {
      height: 80px;
  }

  .accordion .section.large:target h4 + div {
      overflow: auto;
  }

  .accordion p {
      color: #646464;
  }

  .accordion .progress .meter {
     width: 90%;
     height: 2px;
     position: relative;
     background: #555;
     margin: -.9em auto .5em auto;
     padding: 1px;
  }

  .meter > span {
      height: 2px;
      display: block;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
  }



  ​

这篇关于纯 CSS 手风琴问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！