Bootstrap导航栏toggle按钮及下拉菜单失效问题求助

Hey there! Let's figure out why your Bootstrap navbar toggle and dropdown aren't working—here are the key issues I spotted and how to fix them step by step:

1. You're Loading Bootstrap CSS Twice #

You’ve included both a CDN version and a local version of Bootstrap’s CSS file. This can cause style conflicts that break interactive components like the toggle button or dropdowns. Pick one version (CDN is more reliable for beginners) and remove the duplicate line.

2. JavaScript File Problems (The Most Likely Culprit) #

Bootstrap’s interactive features (like navbar toggles and dropdowns) depend entirely on jQuery to work. If your local jquery-2.1.4.min.js or bootstrap.min.js files are in the wrong folder, or the paths are misspelled, the browser can’t load them—so the functionality dies.

For simplicity, I’d recommend using CDN-hosted versions of these files (no path issues!) and always load jQuery before Bootstrap’s JS (since Bootstrap needs jQuery to run).

3. Clean Up Redundant Navigation Structure #

You have two separate <ul class="nav navbar-nav navbar-right"> lists. While this doesn’t directly break functionality, merging them makes your code cleaner and easier to maintain.

Fixed Full Code #

Here’s the corrected version with all the fixes applied:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Landing Page</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- Keep only one Bootstrap CSS (CDN version here) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="Stylesheet/Css_Reset.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Navbar Header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Image</a>
            </div>

            <!-- Collapsible Menu -->
            <div class="collapse navbar-collapse" id="MainNavBar">
                <!-- Merged navbar-right list -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Booking</a></li>
                    <!-- Dropdown Menu -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Product and Services <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Studio</a></li>
                            <li><a href="#">Event</a></li>
                            <li><a href="#">Others</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact Us</a></li>
                    <!-- Moved login/register here -->
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Register Profile</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Load jQuery FIRST, then Bootstrap JS (CDN versions to avoid path issues) -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Quick Checks to Verify #

• Open your browser’s developer tools (press F12) and go to the Console tab—if you see "404 Not Found" errors, that means a file path is wrong.
• Resize your browser window to mobile size—click the toggle button to confirm the menu expands, and test the dropdown to make sure it opens.

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