Hey there! Let's break down why your dropdown menu isn't collapsing properly and fix it step by step.

Key Issues Identified #

• Duplicate Library Imports: You've loaded Bootstrap CSS, jQuery, and Bootstrap JS twice. This can cause conflicts and unexpected behavior in the framework.
• Missing Required Bootstrap 3 Classes/Attributes: Bootstrap 3 relies on specific classes and data attributes to enable dropdown functionality—your markup is missing these critical pieces.

Step-by-Step Fixes #

1. Remove Duplicate Library Imports
   Delete the second set of identical <link> and <script> tags. Having multiple copies of the same libraries can break event listeners and style cascades.

2. Update Dropdown Trigger Element
   Your dropdown toggle <a> tag needs two additions to work with Bootstrap 3:

   • Add the dropdown-toggle class
   • Add the data-toggle="dropdown" attribute
     This tells Bootstrap to bind the dropdown behavior to this element.

3. Add the dropdown-menu Class to the Sub-List
   The nested <ul> containing your dropdown items must have the dropdown-menu class—this is what Bootstrap uses to apply the hidden/collapsed styling by default.

4. Fix the Chevron Icon (Optional)
   Bootstrap 3 uses Glyphicons, not Bootstrap Icons (bi classes). If you want the chevron to display correctly, replace bi bi-chevron-down with glyphicon glyphicon-chevron-down.

Corrected Full Code #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="nav-menu d-none d-lg-block">
  <ul>
    <li class="active"><a href="#header">Dashboard</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span>Drop Down</span> <i class="glyphicon glyphicon-chevron-down"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Drop Down 1</a></li>
        <li><a href="#">Drop Down 2</a></li>
        <li><a href="#">Drop Down 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Why This Works #

• The dropdown-toggle class and data-toggle="dropdown" attribute trigger Bootstrap's dropdown JavaScript behavior.
• The dropdown-menu class applies the default hidden state and styling to the sub-menu, so it only shows when the toggle is clicked.
• Removing duplicate imports eliminates potential conflicts that could prevent the dropdown script from running correctly.

内容的提问来源于stack exchange，提问作者Hritika Agarwal