为 Bootstrap 按钮下拉项添加复选标记答案

【问题标题】：Adding check marks to Bootstrap button drop-down items为 Bootstrap 按钮下拉项添加复选标记
【发布时间】：2020-06-03 12:15:50
【问题描述】：

我正在使用 Twitter 引导下拉按钮：

http://getbootstrap.com/components/#btn-dropdowns-single

我想为用户选择的那些列表项添加复选标记（不一定是复选框）。是否已经内置样式来执行此操作，或者是否有人已经为此构建了解决方案？

谢谢！

【问题讨论】：

我相信下拉菜单会在点击时自动关闭，因此您可能也想检查一下（以防止默认行为）。除此之外，你可以在下拉菜单中放置任何你想要的东西，所以去疯狂吧。
这是我刚刚制作的纯 CSS 复选标记，您可以使用，jsfiddle.net/d4xNe/1。否则，您可以只使用图像放置在其中。（我不建议使用纯 CSS 解决方案，因为它不切实际）
查看 Bootstrap 选择插件 -- bootply.com/107784
嘿，谢谢！我会检查那个插件！

标签： css twitter-bootstrap

【解决方案1】：

这是一个不需要图标字体或图像的解决方案。这就是您需要的所有 CSS：

.dropdown-item-checked::before {
  position: absolute;
  left: .4rem;
  content: '✓';
  font-weight: 600;
}

切换检查状态

要添加/删除复选标记，只需在适当的dropdown-item 上切换dropdown-item-checked 修饰符：

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

它是这样的：

演示和来源

演示：https://codepen.io/claviska/pen/aLxQgv

来源：https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus

【讨论】：

如何阻止它应用于我的其他下拉菜单或使其应用于一个特定的下拉菜单？
在下拉列表中添加一个类，然后在 .dropdown-item-checked 选择器前加上该类名。

【解决方案2】：

这是一个使用 Font Awesome 图标的简单解决方案：http://www.bootply.com/oJgbiXIzBM

使用与http://getbootstrap.com/components/#btn-dropdowns-single相同的HTML

CSS 是：

.active-tick a::after {
    content: '\f00c'; /* http://fontawesome.io/3.2.1/icon/ok/ */
    font-family: 'FontAwesome';
    float: right;
}

以下是选项上互斥刻度的示例：

$('li').click(function(e) {
    $(this).addClass('active-tick').siblings().removeClass('active-tick');
});

【讨论】：

【解决方案3】：

我不知道引导程序中为此内置了什么。

Firefox 和 Webkit 浏览器支持 option 元素上的 background-image 属性：

 <option style="background-image:url(check.gif);">Option</option>

否则，您将需要求助于 jQuery 解决方案。这个不错：

http://www.marghoobsuleman.com/jquery-image-dropdown

【讨论】：

无法访问上面的链接...看起来它被黑了。

【解决方案4】：

我对@987654321@ 进行了调整，以便它使用具有两个边框的旋转框来绘制它，这提供了比 HTML 实体提供的更现代的几何外观。

.dropdown-item-checked::before
{
position: absolute;
left: 0.8rem;
margin-top: 1px;
content: '';
width: 6px;
height: 12px;
border-bottom: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

【讨论】：