js 实现列表展开的效果

以下是一个简单的实现列表展开效果的 JavaScript 代码：

HTML 代码：

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<button onclick="toggleList()">展开/收起列表</button>

CSS 代码：

#list {
  display: none; /* 初始状态隐藏列表 */
}

JavaScript 代码：

function toggleList() {
  var list = document.getElementById("list");
  if (list.style.display === "none") {
    list.style.display = "block"; // 点击展开列表
  } else {
    list.style.display = "none"; // 点击收起列表
  }
}

当点击按钮时，调用 toggleList() 函数来切换列表的显示状态。如果列表当前是隐藏的，则显示列表；如果列表当前是显示的，则隐藏列表。

相关问题

JavaScript实现卷轴展开效果

可以使用CSS的transition和max-height属性来实现卷轴展开效果，JavaScript主要用于控制CSS样式的变化。

首先，需要设置一个包裹卷轴内容的容器元素，例如：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 卷轴内容 -->
  </div>
</div>

然后，通过CSS设置容器元素的max-height属性为0，使卷轴内容默认隐藏，例如：

.scroll-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

接着，需要一个按钮或者其他触发事件来控制卷轴的展开和收起。例如，点击按钮时通过JavaScript动态修改容器元素的max-height属性即可实现展开和收起效果，例如：

const btn = document.querySelector('.btn');
const scrollWrapper = document.querySelector('.scroll-wrapper');

btn.addEventListener('click', () => {
  if (scrollWrapper.classList.contains('open')) {
    scrollWrapper.classList.remove('open');
    scrollWrapper.style.maxHeight = 0;
  } else {
    scrollWrapper.classList.add('open');
    scrollWrapper.style.maxHeight = scrollWrapper.scrollHeight + 'px';
  }
});

在这段代码中，我们通过classList来判断容器元素是否已经展开，如果已经展开则移除open类名并将max-height属性设为0，否则添加open类名并将max-height属性设为容器元素的高度，即scrollHeight。

最后，需要通过CSS设置容器元素的过渡效果，使展开和收起效果更加平滑，例如：

.scroll-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

这样，就完成了JavaScript实现卷轴展开效果的代码。

JavaScript实现卷轴展开关闭效果

可以通过添加或移除CSS类名来实现JavaScript实现卷轴展开关闭效果。首先，需要有一个包含卷轴内容的容器元素和一个用于触发展开和关闭的按钮，例如：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 卷轴内容 -->
  </div>
</div>

<button class="toggle-btn">展开/关闭</button>

然后，通过CSS设置容器元素的高度为0，使卷轴内容默认隐藏，例如：

.scroll-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

接着，需要通过JavaScript来监听按钮的点击事件，并通过添加或移除CSS类名来实现卷轴的展开和关闭，例如：

const toggleBtn = document.querySelector('.toggle-btn');
const scrollWrapper = document.querySelector('.scroll-wrapper');

toggleBtn.addEventListener('click', () => {
  if (scrollWrapper.classList.contains('open')) {
    scrollWrapper.classList.remove('open');
    scrollWrapper.style.height = 0;
  } else {
    scrollWrapper.classList.add('open');
    scrollWrapper.style.height = scrollWrapper.scrollHeight + 'px';
  }
});

在这段代码中，我们通过classList来判断容器元素是否已经展开，如果已经展开则移除open类名并将高度设为0，否则添加open类名并将高度设为容器元素的滚动高度，即scrollHeight。

最后，需要通过CSS设置容器元素的过渡效果，使展开和关闭效果更加平滑，例如：

.scroll-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

这样，就完成了JavaScript实现卷轴展开关闭效果的代码。