Android中如何通过代码创建可同时展开的多折叠列表

Hey there! Let's break down how to create those expandable/collapsible lists where users can open multiple sections at once—super common in UI design, so I’ve got a few solid approaches for you.

1. Use Native HTML/CSS (No JavaScript Required) #

The easiest way is to leverage the <details> and <summary> tags—these are built into HTML, work across all modern browsers, and natively support multiple open sections (each <details> is independent, so opening one doesn’t close others).

Here’s a quick example:

<!-- First collapsible list -->
<details>
  <summary>My Favorite Books</summary>
  <ul>
    <li>The Midnight Library</li>
    <li>Project Hail Mary</li>
    <li>Circe</li>
  </ul>
</details>

<!-- Second collapsible list -->
<details>
  <summary>Top Movies of 2024</summary>
  <ul>
    <li>Dune: Part Two</li>
    <li>Oppenheimer</li>
    <li>Spider-Man: Across the Spider-Verse</li>
  </ul>
</details>

You can style these to match your UI with CSS—here’s a basic custom style example:

details {
  margin: 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.75rem;
}

summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem;
  user-select: none;
}

/* Add a border under the summary when open */
details[open] summary {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0.75rem;
}

/* Animate content when opening/closing */
details > *:not(summary) {
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

details[open] > *:not(summary) {
  opacity: 1;
  max-height: 300px; /* Adjust based on your content size */
}

2. Custom JavaScript Implementation (For Full Control) #

If you need more flexibility—like custom animations, complex interactions, or support for very old browsers—you can build your own collapsible sections with JS. The key is to control each section independently so multiple can stay open.

Step 1: HTML Structure #

<div class="collapsible-group">
  <button class="collapsible-toggle">Weekly Tasks</button>
  <ul class="collapsible-content">
    <li>Finish project proposal</li>
    <li>Schedule team meeting</li>
    <li>Review code PRs</li>
  </ul>
</div>

<div class="collapsible-group">
  <button class="collapsible-toggle">Grocery List</button>
  <ul class="collapsible-content">
    <li>Milk</li>
    <li>Eggs</li>
    <li>Fresh veggies</li>
  </ul>
</div>

Step 2: CSS for Styling & Transitions #

.collapsible-group {
  margin: 1rem 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.collapsible-toggle {
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: none;
  background-color: #f8f9fa;
  cursor: pointer;
  font-weight: 600;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1rem;
  background-color: white;
}

/* Class to show content */
.collapsible-content.active {
  max-height: 250px;
  padding: 1rem;
}

Step 3: JavaScript for Interaction #

// Get all toggle buttons
const toggles = document.querySelectorAll('.collapsible-toggle');

toggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    // Find the content associated with this toggle
    const content = toggle.nextElementSibling;
    // Toggle the active class to show/hide content
    content.classList.toggle('active');
    // Optional: Update button text
    toggle.textContent = content.classList.contains('active') 
      ? 'Hide List' 
      : 'Show List';
  });
});

Key Notes #

• Both methods let users open multiple sections at once because each collapsible element is controlled independently (no global "close all" logic unless you explicitly add it).
• The native <details> approach is best for most cases—it’s lightweight, accessible, and requires zero JS.
• Use the JS approach if you need to add custom behavior (like saving open/closed state to localStorage, or linking sections to other UI elements).

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