求助：实现Div优雅切换效果（默认关闭、单开）

Got it, let's fix this up for you! The issue with your current code is that display: none/block doesn't support smooth transitions—we need to use animatable properties like max-height, opacity, and visibility instead. Here's a solution that checks all your boxes:

Key Changes Made: #

• Graceful Transitions: Replaced instant display toggling with CSS transitions for smooth expand/collapse animations.
• Single Open Div: Ensures only one content panel is open at a time by closing all others before activating the clicked one.
• Persistent Closed State: Keeps all divs closed by default (building on your original setup).

Updated CSS

.dbn {
  /* Maintain default closed state with animatable properties */
  display: block;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  /* Add smooth transition effect */
  transition: all 0.3s ease-in-out;
  border: 1px solid lime;
  padding: 0 .8em; /* Adjust padding to avoid layout jump */
  margin: 1em;
  box-shadow: 0 0 .3em #000;
}

.dbn.active {
  /* Active state for expanded div */
  max-height: 200px; /* Set a value larger than your content height */
  opacity: 1;
  visibility: visible;
  padding: .8em; /* Restore full padding when open */
}

#aa { background-color:#f00; }
#bb { background-color:#0f0; }
#cc { background-color:#00f; }
#pepe { border: 1px solid yellow; }
.lepew {
  width: 150px;
  display: inline-block;
  background-color: lime;
  cursor: pointer; /* Move cursor style to CSS for cleaner markup */
}

Updated JavaScript

function toggle(id) {
  const targetDiv = document.getElementById(id);
  const allContentDivs = document.querySelectorAll(".dbn");

  // If the target is already open, close it
  if (targetDiv.classList.contains("active")) {
    targetDiv.classList.remove("active");
    return;
  }

  // Close all other content divs first
  allContentDivs.forEach(div => {
    div.classList.remove("active");
  });

  // Open the selected div
  targetDiv.classList.add("active");
}

Updated HTML (minor cleanup)

<div id="pepe">
  <a onclick="toggle('aa');" class="lepew">Peter</a>
  <a onclick="toggle('bb');" class="lepew">Paul</a>
  <a onclick="toggle('cc');" class="lepew">Mary</a>
</div>
<div id="aa" class="dbn">
  Content of Div aa
</div>
<div id="bb" class="dbn">
  Content of Div bb
</div>
<div id="cc" class="dbn">
  Content of Div cc
</div>
<br />
<br />
<div>
  Nuthing here
</div>
<br />
<br />
<br />

How It Works: #

• CSS Transitions: We use max-height instead of height because height: auto can't be animated. Setting a sufficiently large max-height ensures the transition works no matter how much content is inside.
• Opacity & Visibility: These properties create a smooth fade effect, and visibility ensures closed divs aren't interactive (unlike just using opacity).
• Class Toggling: Instead of modifying inline styles directly, we add/remove an .active class—this keeps your code organized and separates styling from behavior.

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