Vue JS - 如何隐藏以前的下拉内容

Posted 2023-02-16

【中文标题】Vue JS - 如何隐藏以前的下拉内容

【英文标题】：Vue JS - How to hide previous dropdown content

【发布时间】：2021-09-12 11:12:33

【问题描述】：

我正在创建一个下拉菜单，问题是单击另一个下拉菜单时我无法隐藏下拉内容

<template>
  <div class="dropdown-container">
    <div
      v-for="(i, index) in contentInfo"
      :key="index"
      @click="showContent(i)"
      class="dropdown"
    >
      <div class="dropdown-title">
        <p> i.text </p>
        <div v-show="i.show">
          <p> i.content </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  methods: 
    showContent(i) 
      i.show = !i.show;
    ,
  ,
  data() 
    return 
      contents: false,
      contentInfo: [
        
          text: "What is Lorem Ipsum?",
          content:
            "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots ",
          show: false,
        ,
        
          text: "Where can I get some?",
          content:
            "There are many variations of passages of Lorem Ipsum available, but",
          show: false,
        ,
      ],
    ;
  ,
;
</script>

再次，当你点击文本时，会打开一个下拉菜单，但是当你点击另一个文本时，旧菜单不会折磨，我需要旧菜单来折磨

【问题讨论】：

您可以尝试使用onBlur 事件吗？或者如果您需要事件冒泡，您可以使用focusout 事件。

【参考方案1】：

这是在同一 showContent() 方法中隐藏所有其他下拉列表的问题。您可以将当前索引而不是i 传递给它，以便您可以访问索引进行比较：

<div
  v-for="(i, index) in contentInfo"
  :key="index"
  @click="showContent(index)"
  class="dropdown"
>

然后在你的showContent 方法中：

showContent(currentIndex) 
  this.contentInfo.forEach((entry, index) => 
    // Toggle current dropdown
    if (index === currentIndex) 
      entry.show = !entry.show;
     else 
      // Hide all other dropdowns
      entry.show = false;
    
  );

如果你想让它简洁，它是一个简单的单行：

showContent(currentIndex) 
    this.contentInfo.forEach((entry, index) => entry.show = (index === currentIndex ? !entry.show : false));