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

<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>

<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>

// 获取下拉列表元素
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');
});