如何用JavaScript实现点击下拉主按钮后按钮变绿并保持状态

问题原因 #

• 事件绑定选择器错误：现有JS代码绑定的是input[type="button"]元素，你要操作的Pronto主按钮是<button>标签，下拉选项是<a>标签，完全匹配不到触发元素，点击事件不会执行。
• 样式优先级不足：Bootstrap自带的.btn类已经定义了背景色规则，你写的.green类优先级更低，就算正确添加了类也无法覆盖原生按钮样式。
• 操作目标不匹配：假设你是点击下拉菜单内的选项修改主按钮样式，现有代码是给被点击的元素本身加green类，$(this)指向的是下拉项，不是你要修改的主按钮。
• 额外注意：如果你的项目没有正确引入jQuery，所有$开头的语法都会直接报错失效，先确认jQuery引入顺序在你写的业务JS之前。

修复方案 #

1. 调整CSS优先级 #

将现有.green类修改为以下规则，确保可以覆盖Bootstrap原生按钮样式：

.btn.green {
  background-color: greenyellow;
}

如果还是不生效可以加!important强制生效：

.btn.green {
  background-color: greenyellow !important;
}

2. 替换JS点击绑定逻辑 #

删除原有$('input[type="button"]').click(function(){...})的代码段，根据你的需求选择对应逻辑：

需求1：点击主按钮展开下拉时就变绿

$('.btn-group > .btn:first').click(function() {
  $(this).addClass('green');
});

需求2：点击下拉菜单内的「Pronto」选项后主按钮变绿，点击另一个选项取消绿色

// 点击Pronto选项加绿色
$('.dropdown-item:first').click(function(e) {
  e.preventDefault();
  $(this).closest('.btn-group').find('.btn:first').addClass('green');
});

// 点击Item Não Disponível选项去掉绿色
$('.dropdown-item:eq(1)').click(function(e) {
  e.preventDefault();
  $(this).closest('.btn-group').find('.btn:first').removeClass('green');
});

内容的提问来源于stack exchange，提问作者Lucas.ngr