Question

我是基础4的新手，我们目前在我们的项目MVC4 + Foundation 4中使用基础4（通过NuGet包）

我们想在观点上使用手风琴。

基金会4提供章节; http://foundation.zurb.com/docs/components/section.html 但是由于这在网站上显得过于平淡，我们看了我们认为适合我们网站的基础3手风琴; http://foundation.zurb.com/old-docs/f3/elements.php。需要专家帮助理解我们如何才能使外观和手风琴部分的感觉类似于基础3中的部分。

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

Answer 1

我不是专家，但如果我理解正确你只想在右边添加小三角形图像。首先，你使用的是scss文件吗？如果没有，你一定要查看here。您只需要安装this visual studio插件，然后下载并将zurb-foundation scss files添加到您的项目中。

接下来，转到_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 ***
    **********************************************
             }

    }


  }

有两种方法可以添加三角形，要么使用您选择的图像，要么更好，使用创建三角形的基础的css函数！

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

注意我还没有测试修改基础的部分，但我很确定这应该可以解决问题。

Answer 2

SCSS始终是最佳选择。但是，对于尚未准备好进入SCSS的其他人，您可以通过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;
}

当然，您可以根据需要更改字体大小，或者您可以简单地省略它。希望有所帮助。

UL手风琴基础4

2 个答案: