Bootstrap 4 Dropdown在XHTML页面无法展开的技术求助

I get it, that inconsistency between HTML and XHTML with Bootstrap 4 is super frustrating—especially since Bootstrap 3 worked fine across both. Let's break down why this is happening and fix it.

First, here's the code you shared for reference:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h2>Dropdowns</h2> <p>The .dropdown class is used to indicate a dropdown menu.</p> <p>Use the .dropdown-menu class to actually build the dropdown menu.</p> <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div> </body> </html>

What's Causing This? #

XHTML enforces strict XML parsing rules, which differ from HTML's more forgiving approach. Bootstrap 4's dropdown component (and its dependency, Popper.js) relies on modern HTML5 DOM behaviors—like auto-generating ARIA state attributes—that don't work as expected in XHTML's strict mode. Bootstrap 3, on the other hand, used simpler event binding that played nicely with both environments.

Fixes to Try #

You have two solid options to get the dropdown working in XHTML:

1. Add Required ARIA Attributes Explicitly #

Bootstrap 4 needs clear state markers to manage the dropdown, and XHTML won't auto-create these like HTML does. Add aria-haspopup="true" and aria-expanded="false" to your dropdown toggle button:

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropdown button
</button>

This gives Bootstrap's JavaScript the explicit state info it needs to trigger the dropdown correctly.

2. Manually Initialize the Dropdown #

If the attribute fix doesn't do the trick, you can bypass Bootstrap's automatic data-attribute initialization and force the dropdown to load with jQuery. Add this script right before the closing </body> tag:

<script>
  $(document).ready(function() {
    $('.dropdown-toggle').dropdown();
  });
</script>

This ensures the dropdown plugin initializes directly, avoiding any XHTML parsing quirks with data attributes.

Updated Working Code #

Here's your full XHTML code with both fixes applied (you can use either fix alone, but combining them is safe):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h2>Dropdowns</h2>
    <p>The .dropdown class is used to indicate a dropdown menu.</p>
    <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
    <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
    <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $('.dropdown-toggle').dropdown();
    });
  </script>
</body>
</html>

Why Bootstrap 3 Worked? #

Bootstrap 3's dropdown component used a more straightforward event binding system that didn't depend on ARIA attributes or advanced DOM dataset parsing. It directly listened for clicks on elements with data-toggle="dropdown", which worked consistently in both HTML and XHTML's strict mode.

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