打开时将活动类添加到Bootstraps 4下拉列表，关闭时删除

在Bootstrap 4中，要将活动类添加到下拉列表中，可以通过以下步骤实现：

首先，在HTML文件中引入Bootstrap的CSS和JavaScript文件。可以使用CDN链接或本地文件引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

在HTML文件中创建一个下拉列表，并添加一个按钮来触发下拉功能。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉列表
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- 下拉列表项 -->
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

使用JavaScript代码来实现打开时添加活动类，关闭时删除活动类的功能。

// 获取下拉列表元素
var dropdownMenu = document.querySelector('.dropdown-menu');

// 监听下拉列表的显示事件
dropdownMenu.addEventListener('show.bs.dropdown', function () {
  // 添加活动类
  dropdownMenu.classList.add('active');
});

// 监听下拉列表的隐藏事件
dropdownMenu.addEventListener('hide.bs.dropdown', function () {
  // 删除活动类
  dropdownMenu.classList.remove('active');
});

以上代码中，通过使用Bootstrap提供的CSS类和JavaScript事件，实现了在下拉列表打开时添加活动类，关闭时删除活动类的效果。

关于Bootstrap 4的下拉列表的更多信息，你可以参考腾讯云的产品介绍页面：Bootstrap 4 下拉列表。