H5实现 popWindow 下拉更多巧妙技巧

前端

2024-02-15 10:40:27

引言

在移动端网页开发中，popWindow 弹出窗口是一种常用的交互元素。它可以实现各种各样的效果，比如下拉菜单、弹出对话框、浮动工具栏等。其中，下拉菜单是一种非常常见的popWindow效果，它可以方便用户快速选择所需选项。

传统实现方案

实现下拉菜单的传统方案是使用<select>标签。<select>标签可以创建下拉列表，用户可以通过点击下拉箭头来选择所需选项。这种方案非常简单易用，但它也有一个缺点，那就是它不美观。

新颖实现方案

本文介绍一种新的实现方案，它使用<div>标签和CSS来实现下拉菜单。这种方案更加美观，而且它还可以实现更多的效果，比如动画效果和响应式布局。

HTML结构

<div class="popWindow">
  <button class="popWindow-button">点击展开</button>
  <div class="popWindow-content">
    <ul>
      <li>选项 1</li>
      <li>选项 2</li>
      <li>选项 3</li>
    </ul>
  </div>
</div>

CSS样式

.popWindow {
  position: relative;
  width: 200px;
}

.popWindow-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
}

.popWindow-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ccc;
}

.popWindow-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.popWindow-content li {
  padding: 10px;
  cursor: pointer;
}

.popWindow-content li:hover {
  background-color: #eee;
}

.popWindow.active .popWindow-content {
  max-height: 200px;
}

JavaScript脚本

const popWindow = document.querySelector('.popWindow');
const popWindowButton = document.querySelector('.popWindow-button');
const popWindowContent = document.querySelector('.popWindow-content');

popWindowButton.addEventListener('click', () => {
  popWindow.classList.toggle('active');
});

popWindowContent.addEventListener('click', (e) => {
  const target = e.target;
  if (target.tagName === 'LI') {
    alert(target.textContent);
  }
});