html - Bootstrap 4 将菜单项转换为多选

Question

按照 Bootstrap 文档中的这个示例:http://getbootstrap.com/docs/4.0/components/dropdowns/#menu-dividers

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

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

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

Answer 1

我可以提供纯 JS 解决方案，但如果您使用的是 Bootstrap ，您也可以利用 JQ。

JQuery 解决方案

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

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