如何在Markdown中无需JavaScript实现示例内容批量切换？

Hey there! Let’s break down this problem you’re facing. You’re absolutely correct that with GitHub’s restrictions—disabling JavaScript for XSS protection, and CSS being unable to modify HTML attributes like open—there’s no perfect native way to add a proper batch toggle button/checkbox for all your <details> blocks. But don’t worry, there are a few practical workarounds you can use to get close to the behavior you want:

Workaround 1: Dual-Version Document with Anchor Links #

Create two sections in your README: one with all examples expanded, and another with all examples collapsed. Add navigation links at the top to let users switch between them:

• View All Examples Expanded
• View All Examples Collapsed

Then structure your content like this:

### All Examples Expanded
<details open><summary>Examples</summary>
```js
const Pall = collectInto(Promise.all.bind(Promise));
let p1 = Promise.resolve(1);
let p2 = Promise.resolve(2);
let p3 = new Promise(resolve => setTimeout(resolve, 2000, 3));
Pall(p1, p2, p3).then(console.log);

All Examples Collapsed #

Examples

```js const Pall = collectInto(Promise.all.bind(Promise)); let p1 = Promise.resolve(1); let p2 = Promise.resolve(2); let p3 = new Promise(resolve => setTimeout(resolve, 2000, 3)); Pall(p1, p2, p3).then(console.log); ```

``` **Pros**: No weird hacks, works reliably on GitHub. **Cons**: Requires maintaining duplicate content, which is tedious if you have many examples.

Workaround 2: CSS-Only Toggle Hack (Simulated Behavior) #

While CSS can’t add/remove the open attribute, you can use a hidden checkbox and adjacent sibling selectors to simulate batch expansion/collapse. GitHub allows limited inline HTML and CSS, so try adding this at the top of your README:

<input type="checkbox" id="toggle-all-examples" style="display: none;">
<label for="toggle-all-examples" style="cursor: pointer; padding: 4px 8px; border: 1px solid #d1d5da; border-radius: 4px; background-color: #f6f8fa;">
  Toggle All Examples
</label>

<style>
  /* When checkbox is checked, force all details content to show */
  #toggle-all-examples:checked ~ details > *:not(summary) {
    display: block !important;
  }
  /* Optional: Hide the summary when toggled on (to avoid confusion) */
  #toggle-all-examples:checked ~ details summary {
    display: none;
  }
</style>

Then make sure all your <details> blocks come after this checkbox in the document.

Pros: No duplicate content, gives users a single toggle control.
Cons: It’s a style-based hack, not native <details> behavior. Users can still click individual summaries, but the batch toggle may override their choice temporarily. Also, GitHub’s CSS might conflict with your custom styles.

Workaround 3: Use GitHub Pages (Full JavaScript Support) #

If you’re not restricted to the README alone, move your documentation to GitHub Pages. Here, JavaScript is allowed, so you can easily add a button that toggles the open attribute on all <details> elements:

<button onclick="toggleAllDetails()">Toggle All Examples</button>

<script>
function toggleAllDetails() {
  const allDetails = document.querySelectorAll('details');
  allDetails.forEach(detail => {
    detail.open = !detail.open;
  });
}
</script>

Pros: Perfect native behavior, full control over the toggle.
Cons: Requires hosting on GitHub Pages instead of relying solely on the README.

Final Note #

If you need to stick strictly to the GitHub README with no JS and no duplicate content, the CSS hack is your best bet—even if it’s not a perfect solution. Otherwise, the dual-version approach is the most reliable option for static Markdown.

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