如何实现Bootstrap下拉按钮在匹配页面URL或点击选项后更改背景颜色

在我的Flask web app中，我使用了Bootstrap 4的下拉按钮，其中一个按钮的HTML代码如下：

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" style="{{ buttoncolor }}" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Valdez
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="{{ url_for('ak.valdez_stormtracker') }}">Storm Tracker</a>
          <a class="dropdown-item" href="{{ url_for('ak.valdez_seasontracker') }}">Season Tracker</a>
        </div>
      </div>

我希望当页面的URL与下拉选项中的某个URL匹配时，按钮的背景色能发生变化。

我已经在普通按钮（非下拉）上实现了这个效果，具体是通过custom.js配合自定义CSS来完成的：

普通按钮的实现方案 #

首先是custom.js中的代码：

// Handles the active state transition on bootstrap nav bar
    // get current URL path and assign 'active' class
    var pathname = window.location.pathname;
    console.log(pathname);

    $('.nav > li > a[href="'+pathname+'"]').children().addClass('active')

对应的自定义CSS样式：

.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: var(--color);
}

普通按钮的HTML结构如下：

<li class="nav-item">
            <a href="{{ btnurl }}">
              <button class="btn btn-secondary" style="{{ buttoncolor }}">{{btntxt}}</button>
            </a>
          </li>

现在我找不到适用于下拉按钮的类似解决方案。虽然能像普通按钮那样识别当前URL是最理想的，但如果退而求其次——在点击任意下拉选项时更改按钮背景色，并在加载新URL后保留这个颜色，那也可以接受。

备注：内容来源于stack exchange，提问作者pjw