Javascript jquery手风琴类型页面选项卡导航

我在我的网站上有3个标签和div，垂直的手风琴式导航。 当我点击一个标签时，标签会将类别更改为“打开”，显示在我的页面上，或者消失

当我单击第二个或第三个选项卡时，所有以前的选项卡都会使用prevAll功能将类别更改为“打开”

我的问题是，当我的所有选项卡都打开时，例如，当我单击第一个选项卡（黄色选项卡）时，我希望我以前的所有选项卡都删除“打开”类，以防止黄色选项卡滑到其他选项卡下。其他选项卡也一样

类似于此示例的内容：

我找不到一个方法做标签。。。也许用旗子

这是我的html：

<div id="spot" class="tab">

  <div class="tab_title">

  </div>

</div>

<div id="rencontres" class="tab">

  <div class="tab_title">

  </div>

</div>

<div id="shop" class="tab">

  <div class="tab_title">

  </div>

</div>

还有我的Jquery

$(".tab:not(.open)").click(function(){

  var $this = $(this);
    $this.toggleClass("open");
  $this.prevAll(".tab").addClass("open");


});

下面是一个JSFIDLE：

---

类似下面的片段吗

它检查单击的选项卡是否有

class=“open”

，然后检查下一个同级选项卡是否也有

class=“open”

（这意味着它不是焦点选项卡）。如果不是焦点选项卡，则关闭以下所有同级；否则它会自动关闭

如果它没有

class=“open”

，则在将类添加到自身和所有以前的同级之前，它会从所有同级中删除该类

虽然这可能可以使用多个类来清理，和/或应该转换为使用可访问的方法（例如

aria hidden=“true”

和

aria current=“true”

），以使可访问的技术更容易阅读页面

$（“.tab”）。单击（函数（）{
if（$（this）.hasClass（'open'））{
if（$（this）.next（'.tab'）.hasClass（'open'））{
$（this.nextAll（'.tab'）.removeClass（'open'）；
}否则{
$（this.removeClass（'open'）；
}
}否则{
$（this）.sides（'.tab.open'）.removeClass（'open'）；
$（this.addClass（'open'）.prevAll（'.tab'）.addClass（'open'）；
};
});
.tab{
最小高度：100vh；
位置：固定；
宽度：计算（100vw-80px）；
背景色：rgba（255、255、255、1）；
-webkit过渡：右0.3s轻松输入输出；
-moz转换：右0.3s缓进缓出；
-o型过渡：右0.3s缓进缓出；
过渡：右0.3s缓进缓出；
}
.tab_标题{
高度：100vh；
宽度：40px；
z指数：10；
位置：绝对位置；
左边框：4px实心；
}
#斑点{
右：计算（-100vw+200px）；
背景颜色：黄色；
}
#合同{
右：计算（-100vw+160px）；
背景色：红色；
}
#商店{
右：计算（-100vw+120px）；
背景颜色：蓝色；
}
#点开{
右：80px；
}
#开放式{
右：40px；
}
#开店{
右：0px；
}


$(".tab:not(.open)").click(function(){

  var $this = $(this);
    $this.toggleClass("open");
  $this.prevAll(".tab").addClass("open");


});