Javascript Vuejs：在特定选项卡处于活动状态时打开折叠菜单，在其未处于活动状态时关闭它

我有两个方法forceOpenSettings（）和forceCloseSettings（）。我需要这些打开和关闭折叠部分。这些方法工作正常，因为我单独测试了它。但我需要根据一个条件来做这件事，我有4个标签的b标签。当我点击一个选项卡时，collpase应该打开，每当选项卡变为非活动状态时，折叠必须关闭

<b-tabs content-class="mt-3">
  <b-tab title="First" active><p>I'm the first tab</p></b-tab>
  <b-tab title="Second"><p>I'm the second tab</p></b-tab>
</b-tabs>

我是第一个

我是第二个

我在b-collapse中使用@show和@hide实现了同样的效果，而且效果很好

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings">......</b-collapse>

。。。。。。

Vanilla JS：这里有一个动态迭代器，它将检查是否将active设置为属性

函数opendiv（）{ document.getElementById（'myDiv'）.style.display=“block”； } 函数closediv（）{ document.getElementById（'myDiv'）.style.display=“无”； } 让tabs=document.getElementsByTagName（'b-tab'）； for（设i=0；i{ 如果（制表符[i].getAttribute（“活动”）！==null）{ opendiv（）； }否则{ closediv（）； } }); }

我是第一个

我是第二个

当第二个选项卡有一个名为“active”的属性时显示这个div。

Vanilla JS：下面是一个动态迭代器，它将检查active是否设置为属性

函数opendiv（）{ document.getElementById（'myDiv'）.style.display=“block”； } 函数closediv（）{ document.getElementById（'myDiv'）.style.display=“无”； } 让tabs=document.getElementsByTagName（'b-tab'）； for（设i=0；i{ 如果（制表符[i].getAttribute（“活动”）！==null）{ opendiv（）； }否则{ closediv（）； } }); }

我是第一个

我是第二个

当第二个选项卡具有名为“active”的属性时显示此div

执行此操作不需要多个函数

您可以使用一个功能，从所有选项卡中删除

活动

属性，然后只使您单击的

活动

。只需为所有

组件指定一类

选项卡

，然后您就可以对所有具有一类

选项卡

的选项卡使用这一功能。然后可以使用

@click=“doTabs（）”

指令运行该方法

我已将答案更新为适用于Vue实例

运行代码段以查看它的运行情况

newvue({
el:“#应用程序”，
方法：{
doTabs（）{
const tabs=document.querySelectorAll（“.tab”）
tabs.forEach（i=>i.removeAttribute（'active'））
event.currentTarget.setAttribute（'active'，true）
}
}
})

.tab{padding:10px；border:1px solid#ccc；光标：指针；显示：flex；显示：block}
[活动]{背景色：#eee}
.content{左侧填充：20px；字体大小：12px；可见性：隐藏；不透明度：0；过渡：全部0.2s轻松；页边空白顶部：-40px}
[活动]。内容{可见性：可见；不透明度：1；页边距顶部：0}

我是第一个

这是所有手风琴的内容

我是第二个

这是所有手风琴的内容

执行此操作不需要多个函数

您可以使用一个功能，从所有选项卡中删除

活动

属性，然后只使您单击的

活动

。只需为所有

组件指定一类

选项卡

，然后您就可以对所有具有一类

选项卡

的选项卡使用这一功能。然后可以使用

@click=“doTabs（）”

指令运行该方法

我已将答案更新为适用于Vue实例

运行代码段以查看它的运行情况

newvue({
el:“#应用程序”，
方法：{
doTabs（）{
const tabs=document.querySelectorAll（“.tab”）
tabs.forEach（i=>i.removeAttribute（'active'））
event.currentTarget.setAttribute（'active'，true）
}
}
})

.tab{padding:10px；border:1px solid#ccc；光标：指针；显示：flex；显示：block}
[活动]{背景色：#eee}
.content{左侧填充：20px；字体大小：12px；可见性：隐藏；不透明度：0；过渡：全部0.2s轻松；页边空白顶部：-40px}
[活动]。内容{可见性：可见；不透明度：1；页边距顶部：0}

我是第一个

这是所有手风琴的内容

我是第二个

这是所有手风琴的内容

Vue是数据驱动的，您不需要函数来执行此操作：

{
...,
数据（）{
返回{
...,
活动：'第一'，
制表符：[“第一”、“第二”、“第三”]
}
}
}

我是{{tab}}tab

好的，为了与b-collapse组件的交互，扩展这个

{
道具：[“选项卡”，“活动”]，
计算（）{
崩溃：{
get:function（）{
返回this.active==this.tab
},
设置：函数（值）{
this.$emit（'update:active'，this.tab）
}
}
}
}

...

Vue是数据驱动的，您不需要函数来执行此操作：

{
...,
数据（）{
返回{
...,
活动：'第一'，
制表符：[“第一”、“第二”、“第三”]
}
}
}

我是{{tab}}tab

好的，为了与b-collapse组件的交互，扩展这个

{
道具：[“选项卡”，“活动”]，
计算（）{
崩溃：{
get:function（）{
返回this.active==this.tab
},
设置：函数（值）{
this.$emit（'update:active'，this.tab）
}
}
}
}

...

单击时，检查类属性，如操作类，然后调用方法accordingly@DavidJawHpan那么我需要调用一个方法吗