Foundation 列表

前言

• Foundation 列表。

1、列表

• 实例

  <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
  </ul>

• 效果

  

1.1 圆圈标识符

• 在 Foundation 中，无序列表 (<ul>) 的前缀符号为圆圈，使用 .circle 类，实例如下:

• 实例

  <ul class="circle">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
  </ul>

• 效果 🔗

  

1.2 方块标识符

• 方块标识符前缀使用 .square 类:

• 实例

  <ul class="square">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
  </ul>

• 效果 🔗

  

1.3 无标识符

• 如果不需要标识符，可以使用 .no-bullet 类：

• 实例

  <ul class="no-bullet">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
  </ul>

• 效果 🔗

  

2、列表菜单

• 一些 Web 页面可能需要列表菜单。

• 在 HTML 中，列表菜单同无序列表 <ul> 来定义，例如:

• 实例

  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
  </ul>

• 效果

  

2.1 水平的列表

• 如果需要添加一个水平的列表，可以在 <ul> 上添加 .inline-list 类:

• 实例

  <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
  </ul>

• 效果 🔗

  

3、折叠列表

• 想隐藏部分内容的显示时，可以使用折叠列表。

• 实例

  <ul class="accordion" data-accordion>
      <li class="accordion-navigation">
          <a href="#demo">简单的可折叠实例</a>
          <div id="demo" class="content">
              Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

• 解析

  • .accordion 类和 data-accordion 属性用于创建一个可折叠的元素。.accordion-navigation 类用于渲染可折叠元素。实际的内容在 .content 类 (<div class="content">) 中，点击按钮既可以显示。
  • 在列表项中添加 <a> 元素来控制（显示/隐藏）可折叠的内容。然后锚链接使用与可折叠内容内容相同的 id (<a href=#demo"> 与 <div id="demo"> 相关联)。
  • 可折叠的效果需要初始化 Foundation JS。

3.1 默认显示

• 默认情况下，可折叠内容是隐藏的。可以通过在 <div> 上添加 .active 类让其默认是显示的：

• 实例

  <ul class="accordion" data-accordion>
      <li class="accordion-navigation">
          <a href="#demo">简单的可折叠实例</a>
          <div id="demo" class="content active">
              Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4、手风琴效果

• 手风琴效果用于延展与设置可折叠内容。

• 手风琴效果通过使用多个不同的锚链接与 id 来创建：

• 实例

  <ul class="accordion" data-accordion>
      <li class="accordion-navigation">
          <a href="#demo">手风琴 1</a>
          <div id="demo" class="content active">
              Demo 1 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
      <li class="accordion-navigation">
          <a href="#demo2">手风琴 2</a>
          <div id="demo2" class="content">
              Demo 2 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
      <li class="accordion-navigation">
          <a href="#demo3">手风琴 3</a>
          <div id="demo3" class="content">
              Demo 3 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.1 关闭所有

• 默认情况下，手风琴列表项有一个是打开的。如果想关闭所有可以使用 data-options="multi_expand: true;" 属性:

• 实例

  <ul class="accordion" data-accordion data-options="multi_expand: true;">
      <li class="accordion-navigation">
          <a href="#demo">手风琴 1</a>
          <div id="demo" class="content">
              Demo 1 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
      <li class="accordion-navigation">
          <a href="#demo2">手风琴 2</a>
          <div id="demo2" class="content">
              Demo 2 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
      <li class="accordion-navigation">
          <a href="#demo3">手风琴 3</a>
          <div id="demo3" class="content">
              Demo 3 - Qian Chia 工作室 -- 学的不仅是技术，更是梦想！！！
          </div>
      </li>
  </ul>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗