更改纯CSS3手风琴风格，以获得展开和收缩状态

2018-07-01 08:59:11

我有一个手风琴，只用css创建，没有jquery ui。我有一个标题（链接一个图标和文本）和内容div按照正常（见下文）。我需要在展开时更改标题（更改图标，隐藏文本并放大日期），并在签约时再次显示正常样式。我怎样才能轻松做到这一点？我可能也想在扩展或收缩时更改渐变/边框。

%h3
      %a{:href => "#one"} 
        %div.iconWithNumber 1
        %div.date Jan 31 
        %div.textExcerpt blah...
    %div
      %p 
       Content

- 实例：HTML

  http://www.paulrhayes.com/2009-06/accordion-using-only-css/

-example :: CSS CSS：.accordion {background：#eee; 边界：1px固体＃999; 填充：0 1em 24px; 宽度：500px; 保证金：2em汽车; }

.accordion h2 {margin：12px 0; }

.accordion .section {border-bottom：1px solid #ccc; 填充：0 1em; 背景：#fff; }

.accordion h3 a {display：block; font-weight：normal; 填充：1em 0; }

.accordion h3 a：hover {text-decoration：none; }

.accordion h3 + div {height：0; 溢出：隐藏; -webkit-transition：高度0.3s缓和; }

.accordion：target h3 a {text-decoration：none; font-weight：bold; }

.accordion：target h3 + div {height：100px; }

.accordion .section.large：target h3 + div {overflow：auto; }

链接地址: http://www.djcxy.com/p/87497.html

上一篇: Change Pure CSS3 Accordion Style for expanded and contracted states

下一篇: resize font to fit in a div (on one line)