下拉列表中的选定项目保持选中状态，除非刷新，否则无法单击它

Question

我使用下拉菜单在要显示的不同组的视图之间切换。在选择列表中单击一个选项后，该项目保持蓝色，而在单击另一个选项后，我将无法再次单击该选项（除非我刷新页面，然后一切都会重置）。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle select-group" type="button" 
   id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- 
   expanded="false">

  Select Group
  </button>
  <div class="dropdown-menu view-groups" aria-labelledby="dropdownMenuButton">
    @{ foreach (var item in Model.LunchGroups)
      {
        <a class="dropdown-item" data-toggle="list" id="@item.LunchGroupId" 
        href="#group-@item.LunchGroupId" role="tab">@item.GroupName</a>
      }
     }
  </div>
</div>

最初是下拉菜单： https://gyazo.com/80027cafc49ba4b49cd1de9ab3015231

在这里是单击第1组后： https://gyazo.com/aeb7ed42aa84ecfd9040c4109c9853a8

这是在单击“组2”之后，此时，我无法在不刷新页面的情况下再次单击“组1”。 https://gyazo.com/08cc322aaa79f4c050f87b62b892de02