Bootstrap Dropdown按钮仅在第一次下降

Question

我有以下Dropdown按钮。当页面刷新时，它会下降并选择就好了，但是只要我点击它一次，它就不会再下降了。

试过这篇文章，但并没有真正帮助。 Bootstrap dropdown only drops once

使用最新的Bootstrap版本。

我在JS中添加了这个并解决了这个问题：

$（document）.ready（function（）{$（“。dropdown-toggle”）。dropdown（）;}）

.btn{
    width: 90px;
}

.btn-link {
    width: auto;
    padding-left: 0;
    padding-right: 4px;
    text-align: left;
    color: #4f5b66;
}

.btn input:focus {
    outline: 0;
}

.dropdown-item{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: auto;
}

.dropdown-menu {
    padding-top: 3px;
    padding-bottom: 3px;
    min-width: 120px;
}

.dropdown-divider {
    padding-top: 1px;
    padding-bottom: 1px;
    width: auto;
    margin-top: 1px;
    margin-bottom: 1px;
}

.form-control {
    width: 90px;
}

<div class="btn-group">
        <button id="IDButtonGroupMap" type="button" class="btn btn-danger dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">France</button>
        <div id="IDButtonGroupDownMenu" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">
            <!-- Filled in and Maintained Dynamically from Model View -->
        <a id="IDButtonGroupDown-France" class="dropdown-item">France</a><a id="IDButtonGroupDown-Spain" class="dropdown-item">Spain</a><a id="IDButtonGroupDown-Italy" class="dropdown-item">Italy</a><a id="IDButtonGroupDown-Sweden" class="dropdown-item">Sweden</a><a id="IDButtonGroupDown-Norway" class="dropdown-item">Norway</a><div class="dropdown-divider"></div><a id="IDButtonGroupDown-Custom" class="dropdown-item">Custom</a></div>
    </div>

Answer 1

我已根据您的代码制作了一个片段，它似乎按预期工作。

$(document).ready(function() {
  $(".dropdown-toggle").show();
})

.btn {
  width: 90px;
}

.btn-link {
  width: auto;
  padding-left: 0;
  padding-right: 4px;
  text-align: left;
  color: #4f5b66;
}

.btn input:focus {
  outline: 0;
}

.dropdown-item {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  width: auto;
}

.dropdown-menu {
  padding-top: 3px;
  padding-bottom: 3px;
  min-width: 120px;
}

.dropdown-divider {
  padding-top: 1px;
  padding-bottom: 1px;
  width: auto;
  margin-top: 1px;
  margin-bottom: 1px;
}

.form-control {
  width: 90px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="btn-group">
  <button id="IDButtonGroupMap" type="button" class="btn btn-danger dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">France</button>
  <div id="IDButtonGroupDownMenu" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 31px, 0px); top: 0px; left: 0px; will-change: transform;">
    <!-- Filled in and Maintained Dynamically from Model View -->
    <a id="IDButtonGroupDown-France" class="dropdown-item">France</a><a id="IDButtonGroupDown-Spain" class="dropdown-item">Spain</a><a id="IDButtonGroupDown-Italy" class="dropdown-item">Italy</a><a id="IDButtonGroupDown-Sweden" class="dropdown-item">Sweden</a>
    <a id="IDButtonGroupDown-Norway" class="dropdown-item">Norway</a>
    <div class="dropdown-divider"></div><a id="IDButtonGroupDown-Custom" class="dropdown-item">Custom</a></div>
</div>