Material Kit Bootstrap下拉菜单需要单击两次才能打开

Question

我有此下拉菜单。单击后，下拉列表将打开并立即关闭。在第二次点击，然后打开/关闭就好了。我正在使用材料套件。我创建了这个div，据我所知，当从库中加载页面时，它会呈现更多的html。我是否在HTML中缺少某些东西，或者在加载js之后是否需要添加属性？

.html文件

        <div class="form-group col-md-6 bmd-form-group dropdown-padding">
          <label class="sr-only sr-only-focusable" for="businessMarkets">Business Markets Served*</label>
          <select class="form-control selectpicker" data-style="btn btn-link" id="businessMarkets">
            <option>Business Markets Served*</option>
            <option>Large Enterprise (>10,000 Employees)</option>
            <option>Enterprise (1,000-10,000 Employees)</option>
            <option>Small / Medium (1-1,000 Employees)</option>
          </select>
        </div>

页面呈现的内容...

<div class="form-group col-md-6 bmd-form-group dropdown-padding">
  <label class="sr-only sr-only-focusable" for="verticalMarkets">Vertical Markets Served*</label>
  <div class="btn-group bootstrap-select form-control"><button type="button" class="dropdown-toggle btn btn-link"
      data-toggle="dropdown" role="button" aria-labelledby="undefined" data-id="verticalMarkets"
      title="Vertical Markets Served*" aria-expanded="false"><span class="filter-option pull-left">Vertical Markets
        Served*</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
    <div class="dropdown-menu open" role="combobox">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
        <li data-original-index="0" class="selected"><a tabindex="0" class="" data-tokens="null" role="option"
            aria-disabled="false" aria-selected="true"><span class="text">Vertical Markets Served*</span><span
              class="material-icons  check-mark"> done </span></a></li>
        <li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false"
            aria-selected="false"><span class="text">Education, Energy &amp; Utilities, Financial Services</span><span
              class="material-icons  check-mark"> done </span></a></li>
        <li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false"
            aria-selected="false"><span class="text">Government, Healthcare, Manufacturing, Retail</span><span
              class="material-icons  check-mark"> done </span></a></li>
        <li data-original-index="3"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false"
            aria-selected="false"><span class="text">Technology, Telecommunications</span><span
              class="material-icons  check-mark"> done </span></a></li>
      </ul>
    </div>

<select class="form-control selectpicker" data-style="btn btn-link" id="verticalMarkets" tabindex="-98">
      <option>Vertical Markets Served*</option>
      <option>Education, Energy &amp; Utilities, Financial Services</option>
      <option>Government, Healthcare, Manufacturing, Retail</option>
      <option>Technology, Telecommunications</option>
    </select>
  </div>
</div>