CodePen中Collapse Navbar无法展开问题求助

Hey there! Let's walk through the most likely reasons your collapse navbar isn't working in CodePen, even though it works elsewhere:

1. You're Missing the Required Toggle Button #

Bootstrap's collapse component needs a dedicated trigger button to toggle the menu—your current code doesn't have this! Without it, clicking "切换导航" won't do anything because there's no element bound to the collapse action.

Add this button inside a navbar-header section (to keep the layout correct for Bootstrap 3):

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">QIN</a> <!-- Turn your "QIN" text into a proper brand link -->
</div>

2. Check jQuery & Bootstrap JS Dependencies #

Bootstrap's collapse feature relies on jQuery first, then Bootstrap's JavaScript file. If these aren't loaded in CodePen, the collapse functionality won't work:

• Go to your CodePen project's Settings > JavaScript
• Add jQuery (use a version compatible with Bootstrap 3, like 3.6.0)
• Add Bootstrap's JS file (make sure it's the same version as your CSS—Bootstrap 3 for your navbar-default class)

3. Ensure Version Consistency #

Your code uses navbar-default, which is a Bootstrap 3 class. If you accidentally imported Bootstrap 4 or 5 in CodePen, the classes won't match, and the collapse won't function. Double-check that your CSS and JS imports are for Bootstrap 3.

4. Verify ID Matching #

Make sure the data-target="#navbar" on your toggle button exactly matches the id="navbar" on your collapse container (your code already has this right, but it's worth double-checking if you make changes later).

Full Corrected Navbar Code #

Here's the complete, working version of your navbar with all fixes included:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">QIN</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">ABOUT</a></li>
        <li><a href="#">PROFILE</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

Try these fixes one by one—most likely the missing toggle button or unloaded dependencies are the culprit!

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