html - 如何修改这个基于 CSS 的 Accordion 以在同一页面上使用多个 Accordion ？

Question

你好，我在网站上使用 Accordion :http://www.hongkiat.com/blog/css-content-accordion/由保罗安德伍德创建。我喜欢 Accordion ，因为它使用简单的 CSS 看起来很棒。然而，唯一的问题是我想在同一页上有几个单独的问题。这破坏了功能，因为它们都是同一个类。除了根据需要多次复制、粘贴和重命名类(class)的所有内容，让他们都有自己的类(class)之外，还有什么办法吗？同样，总体目标是在同一页面上完成其中一些工作。

这是直接从他的网站上获取的代码:

HTML:

 <div class="accordion vertical">  
 <section>  
      <h2>About Us</h2>  
      <p>Lorem ipsum dolor sit amet,</p>  
  </section>  

<section>  
    <h2>Services</h2>  
    <p>Lorem ipsum dolor sit amet,</p>  
</section>  

<section>  
    <h2>Blog</h2>  
    <p>Lorem ipsum dolor sit amet</p>  
</section>  

<section>  
    <h2>Portfolio</h2>  
    <p>Lorem ipsum dolor sit amet,</p>  
</section>  

<section>  
    <h2>Contact</h2>  
    <p>Lorem ipsum dolor sit amet</p>  
</section>  
</div>  

CSS:

/**
 *  CSS3 Only Horizontal and Vertical Accordion
 *  Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 */


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
/*End General     Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px; 
-moz-transition:width 0.2s ease-out; 
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
-ms-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 { 
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width:240px; position:relative; left:-100px; top:85px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg); 
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }

.vertical section h2 { position:relative; left:0; top:-15px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}

Answer 1

无需更改 CSS。您应该能够更改 HTML 中新表的 ID 和目标的名称，例如

    <div class="accordion vertical">
      <section id="foo">
          <h2><a href="#foo">Foo</a></h2>
          <!-- content -->
          <p>lorem ipsum dolor</p>
      </section>
    </div>

等...