Zurb foundation 基础4中的UL手风琴 我是基金会4的新成员，我们目前在项目MVC4+基金会4（通过NuGET包）使用基金会4

我们想用手风琴来表达我们的观点

基金会4提供部分； 但是在网站上看起来太单调了，我们看了我们觉得适合我们网站的基础3手风琴。 需要专家帮助理解我们如何使手风琴的外观和感觉类似于在第3号基础中可用的手风琴部分。

---

我们知道基础4不再提供图像，所以我们如何才能在右边实现小图标。

< P>我不是专家，但是如果我理解正确，你只想在右边添加小三角形图像。首先，您使用的是scss文件吗？如果不是，你一定要去看看。您只需安装VisualStudio插件，然后下载并将其添加到您的项目中

接下来，转到_section.scss文件并查找这部分代码：

@mixin section($section-type:accordion) {

  // Accordion styles
  @if $section-type == accordion {

    border-top: $section-border-size $section-border-style $section-border-color;
    position: relative;

    .title {
      top: 0;
      cursor: pointer;
      width: 100%;
      margin: 0;
      background-color: $section-title-bg;

      ***********************************
      *** add a background image here ***
      ***********************************

      a {
        padding: $section-padding;
        display: inline-block;
        color: $section-title-color;
        font-size: emCalc(14px);
        white-space: nowrap;
        width: 100%;
      }
      &:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
    }

    .content {
      display: none;
      padding: $section-padding;
      background-color: $section-content-bg;

      &>*:last-child { margin-bottom: 0; }
      &>*:first-child { padding-top: 0; }
      &>*:last-child { padding-bottom: 0; }
    }


    &.active {
      .content { display: block; }
      .title { background: $section-title-bg-active; 

    **********************************************
    *** add the "active" background image here ***
    **********************************************
             }

    }


  }

有两种方法可以添加三角形，或者使用您选择的图像，或者更好，使用foundation的css函数创建三角形

@include css-triangle(5px, #aaaaaa, top);

---

注意：我还没有测试过修改基金会的部分，但我很确定这应该可以做到。SCSS总是最好的选择。但是，对于其他还没有准备好进入SCS的人，您可以通过CSS来实现。在CSS文件中，只需包括以下内容：

.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
    content: '\25B8';
    position:absolute;
    right:10px;
    font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
    content: '\25BE';
    position:absolute;
    right:10px;
    font-size:22px;
}

---

当然，您可以根据需要更改字体大小，也可以简单地修改它。希望这能有所帮助。

很抱歉延迟回复。我们确实使用了_section.scss&您的建议帮助我们创建了使用section的手风琴的精确外观和感觉。非常感谢。