Vue.js 2.6.11循环渲染时点击隐藏除当前项外所有li元素的实现方案

我来帮你搞定这个FAQ交互的问题！你的核心问题在于每个问题独立维护自身的显示状态，点击时只切换了当前问题的isShow/isHide，但其他问题的状态没有被重置，所以它们依然保持原来的显示状态。Vue.js不需要额外的HTML层面处理，只需要调整状态管理的思路就能轻松实现需求。

优化思路：用单一状态控制当前激活的问题 #

我们不需要给每个问题都加isShow/isHide字段，而是在组件的data里维护一个activeQuestionId变量，用来记录当前展开的问题ID。所有问题的显示/隐藏都基于这个变量来判断：

• 如果当前问题的ID等于activeQuestionId，就显示详情、隐藏按钮
• 反之则显示按钮、隐藏详情

修改后的完整代码 #

模板部分

<li v-for="question in questions" :key="question.id" class="list-group-item">
  <!-- 问题按钮：非当前激活问题时显示 -->
  <button 
    :id="question.id" 
    v-show="activeQuestionId !== question.id"
    @click="showQuestion(question.id)" 
    type="button"
  >
    {{question.title}}
  </button>
  <!-- 详情区域：当前激活问题时显示 -->
  <div 
    v-show="activeQuestionId === question.id"
    class="faq-details-item"
  >
    <div class="faq-details-item-header d-flex justify-content-between">
      <h3 class="faq-title">{{question.title}}</h3>
      <button 
        :id="question.id" 
        @click="showQuestion(null)" 
        class="faq-back"
      >
        Вернуться
      </button>
    </div>
    <div class="faq-details-item-body">
      <p class="faq-description">{{question.description}}</p>
    </div>
  </div>
</li>

Script部分

export default {
  name: "FAQContent",
  data() {
    return {
      activeQuestionId: null, // 记录当前展开的问题ID
      questions: [
        {id: 1, title: 'Вопрос1', description: 'lorem lorem lorem'},
        {id: 2, title: 'Вопрос2', description: 'lorem lorem lorem'},
        {id: 3, title: 'Вопрос3', description: 'lorem lorem lorem'},
      ]
    }
  },
  methods: {
    showQuestion(questionId) {
      // 如果点击的是当前展开的问题，就收起（设为null）；否则展开该问题
      this.activeQuestionId = this.activeQuestionId === questionId ? null : questionId;
    }
  }
}

代码说明 #

1. 状态简化：去掉了每个question对象里的isShow/isHide，用全局的activeQuestionId统一控制，逻辑更清晰，也减少了冗余状态。
2. 模板判断：用v-show（也可以根据渲染需求换成v-if）来判断元素是否显示，替代原来的动态class绑定，代码更直观。
3. 方法优化：showQuestion方法现在只需要接收问题ID，通过判断是否等于当前激活ID来决定展开还是收起，同时自动隐藏其他所有问题——因为其他问题的v-show条件会自动变为false。

这样修改后，点击任意问题按钮都会展开该问题并自动收起其他所有问题，点击返回按钮则会收起当前问题，完全符合你的预期需求。

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