Vue和JS中实现互斥切换面板：点击仅展开当前面板

Got it, let's sort out this panel toggle issue where both Product and Setting panels stay open at the same time. The root problem is that you're not using a single shared state to track which panel should be active—right now each panel is probably handling its own open/close state separately. Here's how to implement the exclusive toggle behavior step by step:

Step 1: Add a reactive state to track the active panel #

First, add a data property to your component that keeps track of which panel is currently expanded. This will be our single source of truth:

export default {
  data() {
    return {
      activePanel: null // Set to 'product' if you want it open by default
    }
  },
  // ... rest of your component code
}

Step 2: Update the click handler to manage the active panel #

Modify your handleClick method to accept a panel identifier (like 'product' or 'setting') and update the activePanel state. This ensures only one panel can be active at a time:

methods: {
  handleClick(panelName, e) {
    e.preventDefault();
    // Toggle logic: if clicking the already active panel, close it; else switch to it
    this.activePanel = this.activePanel === panelName ? null : panelName;
  }
}

Step 3: Bind the panel's expanded state to activePanel #

Link each panel's visibility or expanded styling to whether it matches the activePanel value in your template. Here are two common implementations:

Using v-show/v-if for direct visibility control #

<!-- Product Panel -->
<div class="panel product-panel">
  <button @click="handleClick('product', $event)">Product</button>
  <div class="panel-content" v-show="activePanel === 'product'">
    <!-- Product content goes here -->
  </div>
</div>

<!-- Setting Panel -->
<div class="panel setting-panel">
  <button @click="handleClick('setting', $event)">Setting</button>
  <div class="panel-content" v-show="activePanel === 'setting'">
    <!-- Setting content goes here -->
  </div>
</div>

Using a CSS class for styled expansion #

<!-- Product Panel -->
<div class="panel product-panel" :class="{ 'is-expanded': activePanel === 'product' }">
  <button @click="handleClick('product', $event)">Product</button>
  <div class="panel-content">
    <!-- Product content goes here -->
  </div>
</div>

<!-- Setting Panel -->
<div class="panel setting-panel" :class="{ 'is-expanded': activePanel === 'setting' }">
  <button @click="handleClick('setting', $event)">Setting</button>
  <div class="panel-content">
    <!-- Setting content goes here -->
  </div>
</div>

How this works #

By relying on a single activePanel state variable, you guarantee that only one panel can be marked as active at any time. When you click a panel, the handler checks if it's already the active one—if yes, it closes the panel (sets activePanel to null); if not, it switches the active state to that panel, automatically closing the previously open one.

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