纯CSS手风琴问题

Question

我正在使用一个纯CSS手风琴http://reversl.net/accordion/我可以使用基本功能（标题2和3都切换）但是如果我添加相同的话，我不能在标题1切换UL到它。因为标题1的样式不同，问题（我认为）在于命名/定位它的+ div？

请注意：为了演示，我从标题1中删除了UL，因为它阻止了标题2＆amp; 3来自切换。

Answer 1

你犯了几个错误。计算太多了：

这是一个有效的例子：试试看，我改变了什么 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;
  }



  ​

Answer 2

这是因为分配给div id =“one”的类“progress”保持div与内容的大小不变。