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

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

2 个答案: