Bootstrap 4 将菜单项转换为多选答案

【问题标题】：Bootstrap 4 transform menu items into a multiselectBootstrap 4 将菜单项转换为多选
【发布时间】：2018-02-20 20:10:06
【问题描述】：

我希望切换菜单items的点击效果，所以当我点击它时它变成蓝色，如果我再次点击它，它又回到未选中状态。模仿多选，但我不想使用复选框或默认多选。

我可以只使用 css 调整来做到这一点吗？

我对实现更直观的多选的任何其他想法持开放态度，特别是针对移动设备（外部库除外）

【问题讨论】：

Bootstrap 的 dropdown-menu 不能使用纯 CSS 来“切换”显示。为什么不简单地使用标准的多选并将其设置为类似于 Bootstrap 的样式？
@ObsidianAge 老实说，我不知道该怎么做，现在只是学习
我怀疑你可以使用纯 CSS 来做到这一点。不过使用 JS/JQ 不是问题。如果您需要 JS 解决方案，请告诉我。
@LoveHateDevelopment 当然！那么这可能是正确的答案

【解决方案1】：

我可以提供一个纯 JS 解决方案，但如果你使用 bootstrap，你不妨利用 JQ。

jQuery 解决方案

Bootstrap 已经有一个名为 active 的类。如果您的类名称不同，显然只需替换 .dropdown-item 即可。

$(".dropdown-item").click(function() {
   $(this).toggleClass("active");
});

【讨论】：