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

Question

I'm trying to make a simple sign in program for use in a podium at my office. All that this program is responsible for is allowing clients to put in their name, username, description of their problem, and click submit. this information will then get put into a CSV.

This all works fine, however the Bootstrap 4 dropdown menu I have included is always stuck open. It defaults to expanded when the page loads, and remains open regardless of clicking the button or not.

My code is almost exactly the same as the example code shown on Bootstraps site:

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

And here are my imports:

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

EDIT: This issue seems to only exist within the Electron/Node.JS enviornment. running my html/css within chrome (by launching the index.html file) works as expected and does not show any errors in the developer console.

Answer 1

You have to import bootstraps.bundle.js , too. Otherwise it will not toggle:

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

take note that you're importing jquery before importing boottsraps js-file

---

You also have to remove style="display: block" from your dropdown-menu. This display: block; is the reason why your menu stucks in expanded position.

 <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

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

The dropdown remains "open" because it has inline style "style:display:block" . Remove this and follow the normal dropdown structure ...

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

Demo: https://www.codeply.com/go/ViKYGOigbL