javascript - 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

"the Bootstrap 4 dropdown menu I have included is always stuck open"

下拉列表保持“打开”状态，因为它具有内联样式 "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