如何修改Codepen中Bootstrap下拉菜单代码实现单选及自定义勾选图标

一、核心修改说明 #

1. 单选效果实现 #

原JS逻辑仅支持单个选项的勾选状态切换，修改后逻辑为：点击任意选项时，先移除当前下拉菜单内所有选项的勾选类，再为当前点击的选项添加勾选类，即可实现单选互斥效果。该逻辑支持页面存在多个独立下拉菜单的场景，不同下拉的单选状态互不干扰。

2. 自定义勾选图标实现 #

修改.dropdown-item-checked::before的CSS规则，将原来的文字对勾替换为自定义背景图，设置对应尺寸和定位即可适配自定义图标样式。 #

二、修改后完整代码 #

HTML部分（无变动） #

<!-- Example Dropdown -->
<div class="dropdown">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Item 1</a>
    <a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
    <a href="#" class="dropdown-item">Item 3</a>
  </div>
</div>

<p class="mt-4">
  View the original post
</p>

<p>
  This code is by @claviska and has been released into the public domain.
</p>

CSS部分 #

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  /* 移除原文字对勾 */
  content: '';
  /* 替换为你的自定义勾选图标实际地址 */
  background-image: url('自定义图标地址');
  background-size: contain;
  background-repeat: no-repeat;
  /* 可根据你的图标实际尺寸调整宽高 */
  width: 16px;
  height: 16px;
  /* 垂直居中对齐 */
  top: 50%;
  transform: translateY(-50%);
}

body {
  padding: 1rem;
}

JavaScript部分 #

// 单选切换逻辑
$(document).on('click', '.dropdown-item', function(event) {
  event.preventDefault();
  // 移除当前下拉菜单内所有选项的勾选状态
  $(this).closest('.dropdown-menu').find('.dropdown-item').removeClass('dropdown-item-checked');
  // 为当前点击的选项添加勾选状态
  $(this).addClass('dropdown-item-checked');  
});

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