如何实现语言选择容器的展开/收起切换功能？

需求：点击向下 Chevron 图标时，显示格式化的语言选项并展开容器；点击叉号图标时关闭该容器。以下是当前的代码实现：

原JS代码 #

const toggles = document.querySelectorAll('.lang-toggle')

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    toggle.parentNode.classList.toggle('active')
  })
})

原CSS代码 #

.lang-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 60px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.lang-toggle:focus {
  outline: 0;
}

.lang-toggle .fa-times {
  display: none;
}

.lang.active .lang-toggle .fa-times {
  color: #fff;
  display: block;
}

.lang.active .lang-toggle .fa-chevron-down {
  display: none;
}

.lang.active .lang-toggle {
  background-color: #9fa4a8;
}

.lang {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.language-frame-desktop {
  width: 90%;
  margin-left: 5%;
  margin-top: 12px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.language-desktop {
  margin: 6px;
  height: 24px;
  justify-content: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: black;
}

.language-container {
  margin-left: 5%;
  width: 90%;
  border-bottom: 2px solid #c8c8cb;
  display: none;
  flex-direction: row;
  justify-content: space-around;
}

.language-name-box-desktop {
  border: 1px solid #f0f0f0;
  width: 122px;
  padding: 6px;
  flex-direction: column;
  background-color: #f7f7f9;
  border-radius: 12px;
  align-items: flex-start;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css" />
  <title>Language Toggle</title>
</head>

<body>

  <div class="lang">
    <div class="language-frame-desktop">
      <p class="language-desktop">Languages</p>
    </div>
    <div class="language-container">
      <div class="language-name-box-desktop gt hover" id="myDiv">
        <img src="./icons/JS.svg" alt="more" class="language-icon" id="demo">
        <p class="language-name">JavaScript</p>
      </div>
      <div class="language-name-box-desktop gt hover">
        <img src="./icons/HTML.svg" alt="more" class="language-icon">
        <p class="language-name">HTML</p>
      </div>
      <div class="language-name-box-desktop gt hover">
        <img src="./icons/CSS.svg" alt="more" class="language-icon">
        <p class="language-name">CSS</p>
      </div>
    </div>
    <button class="lang-toggle">
      <i class="fas fa-chevron-down"></i>
      <i class="fas fa-times"></i>
    </button>
  </div>

  <script src="script.js"></script>
</body>

</html>

修复方案 #

原代码核心问题是未通过active类控制语言选项容器的显示，同时存在布局样式缺失和内容截断问题。以下是修改后的完整代码：

修改后的CSS

.lang-toggle {
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  position: absolute;
  top: 60px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.lang-toggle:focus {
  outline: 0;
}

.lang-toggle .fa-times {
  display: none;
}

.lang.active .lang-toggle .fa-times {
  color: #fff;
  display: block;
}

.lang.active .lang-toggle .fa-chevron-down {
  display: none;
}

.lang.active .lang-toggle {
  background-color: #9fa4a8;
}

.lang {
  background-color: transparent;
  border: 1px solid #9fa4a8;
  border-radius: 10px;
  margin: 20px 0;
  padding: 30px;
  position: relative;
  transition: 0.3s ease;
}

.lang.active {
  padding-bottom: 50px;
}

.language-frame-desktop {
  width: 90%;
  margin-left: 5%;
  margin-top: 12px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
}

.language-desktop {
  margin: 6px;
  height: 24px;
  justify-content: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: black;
}

.language-container {
  margin-left: 5%;
  width: 90%;
  border-bottom: 2px solid #c8c8cb;
  display: none;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 20px;
}

.lang.active .language-container {
  display: flex;
}

.language-name-box-desktop {
  border: 1px solid #f0f0f0;
  width: 122px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f9;
  border-radius: 12px;
  align-items: flex-start;
}

JS代码（保持原逻辑不变）

const toggles = document.querySelectorAll('.lang-toggle')

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    toggle.parentNode.classList.toggle('active')
  })
})

HTML代码（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css" />
  <title>Language Toggle</title>
</head>

<body>

  <div class="lang">
    <div class="language-frame-desktop">
      <p class="language-desktop">Languages</p>
    </div>
    <div class="language-container">
      <div class="language-name-box-desktop gt hover" id="myDiv">
        <img src="./icons/JS.svg" alt="more" class="language-icon" id="demo">
        <p class="language-name">JavaScript</p>
      </div>
      <div class="language-name-box-desktop gt hover">
        <img src="./icons/HTML.svg" alt="more" class="language-icon">
        <p class="language-name">HTML</p>
      </div>
      <div class="language-name-box-desktop gt hover">
        <img src="./icons/CSS.svg" alt="more" class="language-icon">
        <p class="language-name">CSS</p>
      </div>
    </div>
    <button class="lang-toggle">
      <i class="fas fa-chevron-down"></i>
      <i class="fas fa-times"></i>
    </button>
  </div>

  <script src="script.js"></script>
</body>

</html>

修改说明 #

1. 控制语言容器显示：新增.lang.active .language-container { display: flex; }，容器激活时自动显示语言选项
2. 修复内容截断：移除.lang的overflow: hidden属性，避免展开时语言选项被容器裁剪
3. 优化布局空间：给.lang.active添加padding-bottom，确保展开后容器底部有足够空间容纳语言选项
4. 修复选项卡片布局：给.language-name-box-desktop添加display: flex，使图标和文字的垂直布局生效

内容的提问来源于stack exchange，提问作者Syed Asad Jameel