Css 纯手风琴问题

我正在玩一个纯CSS手风琴，我可以得到基本的功能（标题2和3都切换），但如果我添加相同的UL，我不能得到标题1切换。因为标题1的样式不同，所以问题（我认为）在于命名/定位它的+div

---

请注意：为了演示，我从标题1中删除了UL，因为它阻止了标题2和3的切换。

您犯了几个错误。太多而无法计数：

下面是一个工作示例：试试看，我改变了什么

HTML

---

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

数据属于HTML，它是模型；样式属于CSS，它是视图；交互属于JavaScript，它是控制器。@ZZBOV可见性更改不应视为交互。如果你可以用CSS3来做，并且你的听众也支持它，那就好了@吉达：我喜欢

：target

部分。我不知道。浏览器的兼容性如何@yunzen，可视性变化肯定是交互作用，但是它们发生的方式可以由CSS3管理。可视性的实际变化应该通过JS添加/删除类和其他属性来实现（例如@yunzen似乎受到ie9+、FF10.0.2+、Saf 5.1+、Chrome 17+和Opera 11.6+的支持，哇，你的权利！确实有很多错误：-/值得注意的是：在HTML中，您从.metrics div中删除了标题。您还从CSS的子部分中删除了div id“two”（为什么是这样？），您修复了一些我弄乱的选择器，对吗？我遗漏了什么吗？@Jedda我从sub_部分删除了ID，因为你不能有两个相同的ID。我从指标中删除了标题，因为您定义了在标题后显示div。非常感谢。有一件事我有点困惑！为什么使用Div id=“two”和Div id=“four”等而不是Div id=“three”？我可以把它命名为1和2，但我太懒了。改用foo、bar和baz，这些都没有意义，我明白了。为帮助干杯

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

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



  ​