Bootstrap下拉菜单停留在展开位置，不响应按钮

Question

我正在尝试制作一个简单的登录程序，以便在我的办公室的讲台上使用。 该程序负责的全部工作是允许客户输入他们的姓名，用户名，问题描述，然后单击“提交”。 然后将这些信息放入CSV。

一切正常，但是我包含的Bootstrap 4下拉菜单始终处于打开状态。 当页面加载时，它默认为展开状态，并且无论是否单击按钮，它都保持打开状态。

我的代码与Bootstraps站点上显示的示例代码几乎完全相同：

 <div class="row">
     <div class="col-sm">
        <div class="dropdown">
           <button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Reason for your visit
           </button>
           <div class="col-sm">
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="display: block">
                 <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
                 <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
                 <a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
                 <a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
                 <a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
              </div>
           </div>
        </div>
     </div>
  </div>

这是我的进口货：

<script src="node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" 
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">

编辑：这个问题似乎只存在于Electron / Node.JS环境中。 在Chrome中运行我的html / css（通过启动index.html文件）可以按预期工作，并且在开发人员控制台中不会显示任何错误。

Answer 1

您还必须导入bootstraps.bundle.js 。 否则它将不会切换：

<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

请注意，您在导入boottsraps js文件之前先导入jquery

---

您还必须从下拉菜单中删除style="display: block" 。 此display: block; 这就是菜单停留在扩展位置的原因。

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> <!-- imported jquery, bootstraps css and bootstraps bundle.js --> <div class="row"> <div class="col-sm"> <div class="dropdown"> <button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Reason for your visit </button> <div class="col-sm"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <!-- removed style="display: block;" --> <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a> <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a> <a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a> <a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a> <a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a> </div> </div> </div> </div> </div> 

Answer 2

“我包含的Bootstrap 4下拉菜单始终处于打开状态”

下拉列表保持“打开”状态，因为它具有内联样式"style:display:block" 。 删除它并遵循正常的下拉菜单结构 ...

     <div class="col-sm">
            <div class="dropdown">
                <button class="btn btn-secondary btn btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Reason for your visit
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Dropoff')">Scantron dropoff</a>
                    <a class="dropdown-item" href="javascript:dropDownSelection('Scantron Pickup')">Scantron pickup</a>
                    <a class="dropdown-item" href="javascript:dropDownSelection('Wifi issues')">Wifi issues</a>
                    <a class="dropdown-item" href="javascript:dropDownSelection('DUO Enrollment issues')">DUO Enrollment issues</a>
                    <a class="dropdown-item" href="javascript:dropDownSelection('Password Issues')">Password issues</a>
                </div>
            </div>
     </div>

演示： https ： //www.codeply.com/go/ViKYGOigbL