Чистый CSS Аккордеонный Вопрос - PullRequest
Новая
       5

Чистый CSS Аккордеонный Вопрос

1 голос
/ 08 марта 2012

Я играю с чистым CSS-аккордеоном http://reversl.net/accordion/ Я могу заставить работать основные функции (заголовки 2 и 3 переключаются) Но я не могу переключить заголовок 1, если добавляю то же самоеUL к этому.Поскольку заголовок 1 по-разному оформлен, проблема (я думаю) заключается в присвоении имен / нацеливании, это + div?

Обратите внимание: я удалил UL из заголовка 1 ради демонстрации, посколькуЗаголовки 2 и 3 от переключения.

Ответы [ 2 ]

1 голос
/ 08 марта 2012

Это потому, что класс "progress" назначен div id = "one", который поддерживает постоянный размер div с содержимым.

1 голос
/ 08 марта 2012

Вы сделали несколько ошибок.Слишком много, чтобы сосчитать:

Вот рабочий пример: Попробуйте и посмотрите, что я изменил
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;
  }



  ​
...