Bootstrap下拉点击动态填充、关闭清空内容的实现方法

完全可以实现按需生成下拉内容，不需要在页面初始化时渲染所有下拉节点，核心利用Bootstrap 4原生的下拉生命周期事件即可，不需要额外给按钮手写onclick逻辑，也不会和组件原有交互冲突。

实现逻辑 #

• 初始渲染列表卡片时，仅生成下拉按钮和空的下拉菜单容器，不提前渲染下拉项，同时将当前卡片对应的备注数据存储在DOM节点的自定义属性上，供触发时读取
• 绑定show.bs.dropdown事件（下拉菜单开始展示前触发），事件触发时读取对应节点存储的备注数据，动态生成下拉项插入菜单容器
• 绑定hidden.bs.dropdown事件（下拉菜单完全关闭后触发），事件触发时清空菜单容器内的所有子节点，减少常驻DOM节点数量

修改后核心代码 #

调整卡片渲染函数 #

初始只渲染空菜单，不生成下拉项，同时挂载备注数据到DOM：

var data = [{
  "id": 104,
  "note": "[\"copyright striked\"]",
  "status_color": "primary"
}, {
  "id": 49,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 105,
  "note": "[\"officially translated\"]",
  "status_color": "secondary"
}, {
  "id": 43,
  "note": "[]",
  "status_color": "primary"
}, {
  "id": 48,
  "note": "[\"Waiting for after credits\"]",
  "status_color": "warning"
}];

for (let row of data) {
  let uid = row.id;
  let notes = row.note;
  let color = row.status_color;
  $('#collection').append(html_card(uid, notes, color));
}

function html_card(id, notes, color) {
  let append = '';
  append += '<div class="">';
  if (notes != '[]') {
    append += '<div class="dropdown" data-notes="'+notes.replace(/"/g, '&quot;')+'">';
    append += '<button class="btn btn-outline-' + color + ' text-left rounded-pill px-2 py-0 mr-3" role="button" data-toggle="dropdown" aria-expanded="false">';
    append += 'See Notes<span class="bi bi-sticky ml-1"></span></button>';
    // 初始为空菜单，不预渲染下拉项
    append += '<ul class="dropdown-menu dropdown-menu-right"></ul>';
    append += '</div>';
  }
  append += '</div>';
  return append;
}

绑定下拉事件实现动态填充/清空 #

用事件委托绑定动态生成的下拉组件事件，不需要逐个节点绑定：

// 下拉显示前动态填充内容
$('#collection').on('show.bs.dropdown', '.dropdown', function() {
  const noteList = JSON.parse($(this).data('notes'));
  const $menu = $(this).find('.dropdown-menu');
  noteList.forEach(note => {
    $menu.append(`<li class="dropdown-item-text pr-2">&raquo; ${note}</li>`);
  })
})

// 下拉关闭后清空内容
$('#collection').on('hidden.bs.dropdown', '.dropdown', function() {
  $(this).find('.dropdown-menu').empty();
})

基础页面结构（无需调整原有依赖引入） #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

<div id="collection" class='row justify-content-center px-2 my-3'></div>

该方案完全保留原有Bootstrap下拉的交互样式，页面初始化时不会生成任何冗余的下拉项节点，只有用户实际点击触发下拉时才会生成对应内容，关闭后即时清空，完全满足紧凑页面的性能要求。

内容的提问来源于stack exchange，提问作者deacon leid