HTML5中details>summary内Font Awesome链接无法点击是否为Bug？

Hey there, let's break this down clearly:

Short Answer #

This is 100% expected behavior per the HTML5 specification — not a bug at all.

Why This Happens #

The <summary> element is explicitly designed as the interactive trigger for the <details> component. The HTML standard defines that any click within the bounds of <summary> (whether it's plain text, an icon, or a nested link) will toggle the <details> element's expanded/collapsed state.

Think of the entire <summary> block as a single control for <details>. When you click the nested <a> tag, the click event "bubbles up" to the <summary> first, triggering the toggle action. Browsers prioritize this native component interactivity over the link's default navigation behavior by default.

How to Make the Link Work Normally #

If you want the link to navigate to its target without flipping the <details> state, you just need to stop the click event from bubbling up to the <summary>. Here's a quick JavaScript fix:

// Grab the link inside your summary
const summaryLink = document.querySelector('summary a');

// Prevent the click event from reaching the summary element
summaryLink.addEventListener('click', function(e) {
  e.stopPropagation();
});

With this code in place:

• Clicking the "Visit Google" link (or its nested plus icon) will navigate to the target URL as intended.
• Clicking the "Details" text or empty space in the summary will still toggle the <details> element normally.

Your Original Code for Reference #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Details Tag and Font Awesome Link Issue</h2>
  <details>
    <summary> Details 
      <a href="http://google.com"> 
        <i class="glyphicon glyphicon-plus"></i> Visit Google 
      </a> 
    </summary>
    <p> The Searching Site</p>
  </details>
</div>

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