CSS Flexbox 实现联动列表的技巧-JavaScript中文网-JavaScript教程资源分享门户

CSS Flexbox 是一种 CSS 布局模式，它允许开发者对页面中的元素进行灵活的排列。在前端开发中，我们可以使用 Flexbox 来实现各种布局效果，包括联动列表。

联动列表是指两个或多个列表之间通过选择某一项，让另一个列表中的内容根据选择的项进行展示的交互形式。这个功能在实际开发中很常见，它可以让用户更方便地浏览和筛选数据。

在这篇文章中，我们将介绍如何使用 CSS Flexbox 实现一个基本的联动列表，并提供例子代码。

创建 HTML 结构

首先，我们需要在 HTML 中创建两个列表：一个用于用户选择，另一个用于展示选择项下的相关内容。这两个列表可以使用 <ul> 和 <li> 标签来实现。代码如下：

// javascriptcn.com 代码示例
<ul class="options">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>

<ul class="contents">
  <li>Content 1</li>
  <li>Content 2</li>
  <li>Content 3</li>
</ul>

使用 Flexbox 布局

在上一步中，我们已经创建了两个列表。但是，我们需要使用 CSS 来让它们以联动的形式展示。

首先，在父元素中添加 display:flex 属性，以启用 Flexbox 布局。为了让两个列表显示在一行上，我们需要给它们的父元素设置 flex-direction: row，这将使元素从左到右排列。还需要添加 flex-wrap: nowrap，这将防止列表折行。

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

接下来，我们需要添加 flex-basis 和 flex-grow 属性，使两个列表在容器中占据相应的空间。在这个例子中，我们将选择列表和内容列表的占比分别设置为 1：3，因此代码如下：

// javascriptcn.com 代码示例
.options {
  flex-basis: 25%;
  flex-grow: 1;
}

.contents {
  flex-basis: 75%;
  flex-grow: 3;
}

这将使左侧的选择列表占据 25% 的空间，右侧的内容列表占据 75% 的空间。另外，我们通过 flex-grow 属性指定了两个列表在容器中的相对大小。

添加交互效果

现在，我们已经使用 CSS Flexbox 实现了联动列表的基本功能。但是，我们还需要添加交互效果，使得选择一个选项后，在右侧的列表中展示相应的内容。

我们可以使用 JavaScript 来实现这个功能。具体来说，我们需要使用事件监听器在选择列表中监听 click 事件，并在右侧的内容列表中更新展示的内容。这将涉及到一些 DOM 操作和 CSS 类添加/移除。

// javascriptcn.com 代码示例
const options = document.querySelectorAll('.options li');
options.forEach((option) => {
  option.addEventListener('click', () => {
    // 移除当前选中的项目
    const activeOption = document.querySelector('.options li.active');
    if (activeOption) {
      activeOption.classList.remove('active');
    }

    // 设置新的选中项目
    option.classList.add('active');

    // 根据选择的项目更新内容
    const contentList = document.querySelectorAll('.contents li');
    contentList.forEach((content) => {
      if (content.dataset.option === option.textContent) {
        content.classList.add('show');
      } else {
        content.classList.remove('show');
      }
    });
  });
});

以上代码将监听选择列表中每个选项的点击事件。当用户点击某个选项时，该代码将先移除当前选中的项目的 CSS 类“active”，然后将新的选中项目添加相应的 CSS 类“active”。

接下来，该代码将遍历右侧的内容列表，并根据当前选择的项目设置 CSS 类“show”。这样，右侧的内容列表就会显示与选择列表中当前选中的项相应的内容。

总结

在这篇文章中，我们介绍了如何使用 CSS Flexbox 实现联动列表的基本功能。我们使用了 HTML 和 CSS 创建两个列表，并使用 Flexbox 布局将它们在一行内对齐。我们还添加了 JavaScript，以便在选择列表中选择选项时更新右侧的内容列表。

这个例子虽然简单，但它涵盖了 CSS Flexbox、HTML 和 JavaScript 三个主要前端技术。通过实践这个例子，我们可以更好地理解这些技术，同时还可以了解联动列表功能的实现方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651e3a0695b1f8cacd5e6fc5