html - 特殊的 HTML/CSS Accordion Action

Question

我正在处理一个与网站其余部分具有不同样式的页面。所以我正在该页面中处理所有 HTML 和 CSS。目前我正在尝试制作一个半复杂的(至少对我而言) Accordion 。这就是我希望它的工作方式:

• 悬停展开(到此为止)
• 单击以保持打开状态，直到单击另一张幻灯片
• 有一个标题是主要 Accordion 的一部分，但不受悬停和点击的影响

我还计划在其中添加图像以及可能的其他 Accordion 。内部 Accordion 是水平的，主要的是垂直的。

我也设法把它搞砸了一点。我这辈子都做不到把所有的 Angular 都弄平，这样它们就不圆了。

请记住，我对 html 和 CSS 知之甚少。我所拥有的大部分内容要么是用谷歌搜索、猜测的，要么是先验知识。我真的很感激我能得到的任何帮助。

CSS

    <style>

/*------------------------------------*\
    ACCORDION
\*------------------------------------*/

.accordion{
    width:100%;
    overflow:hidden;
    list-style:none;
    margin-bottom:10px;
    text-shadow:1px 1px 1px rgba(0,0,0,0.25);
    background:transparent;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
.accordion li{
    float:left;
    width:20%;
    overflow:hidden;
    height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out;
    -moz-transition-delay:0.15s;
    -webkit-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    transition-delay:0.15s;
}
.accordion li:first-of-type{
    -moz-border-radius:0px 0 0 0px;
    -webkit-border-radius:0px 0 0 0px;
    -o-border-radius:0px 0 0 0px;
    border-radius:0px 0 0 0px;
}
.accordion li:last-of-type{
    -moz-border-radius:0 0px 0px 0;
    -webkit-border-radius:0 0px 0px 0;
    -o-border-radius:0 0px 0px 0;
    border-radius:0 0px 0px 0;
}
.accordion div{
    padding:10px;
}
.accordion:hover li{
    width:10%;
}
.accordion li:hover{
    width:30%;
}
.slide-01  { background:white; color:#333; text-shadow:none; }
.slide-02  { background:white; color:#333; text-shadow:none; }
.slide-03  { background:white; color:#333; text-shadow:none; }
.slide-04  { background:white; color:#333; text-shadow:none; }
.slide-05  { background:white; color:#333; text-shadow:none; }

/*------------------------------------*\
    VERTICAL
\*------------------------------------*/
#vertical{
    height:600px;
}
#vertical li{
    float:none;
    height:5%;
    width:100%;
    -moz-transition:height 0.2s ease-out;
    -webkit-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
    -moz-border-radius:10px 10px 0 0;
    -webkit-border-radius:10px 10px 0 0;
    -o-border-radius:10px 10px 0 0;
    border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    -o-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
#vertical:hover li{
    height:10%;
    width:100%;
}
#vertical li:hover{
    height:30%;
    width:100%;
}
</style>

HTML

<div>
<ul class="accordion" id="vertical">
  <li class="slide-01">
    <div>
      <h2>» Slide one</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-02">
    <div>
      <h2>» Slide two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-03">
    <div>
      <h2>» Slide three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
  <li class="slide-04">
    <div>
      <h2>» Slide four</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
    <li class="slide-05">
    <div>
      <h2>» Slide Five</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
    </div>
  </li>
</ul>
</div>

Answer 1

我没有看到您调用 javascript 来创建操作。

请查看此链接。

http://www.codeproject.com/Articles/125398/Java-Accordion-Menu-Visual-Effects-and-Customizati

至于你的圆 Angular ，你必须从CSS文件中移除下面的代码

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

这就是元素的圆 Angular 。

希望对你有帮助