javascript - jquery Accordion 式页面选项卡导航

Question

我的网站上有 3 个选项卡 div，采用垂直 Accordion 式导航。 当我单击一个选项卡时，这些选项卡会将类更改为“打开”、显示在我的页面上或消失。

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

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

接近这个例子的东西: https://violaineetjeremy.fr/

我找不到做制表符的方法...也许使用标志？

这是我的 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>

我的 CSS:

.tab {
    min-height: 100vh;
    position: fixed;
    width: calc(100vw - 80px);
    background-color: rgba(255, 255, 255, 1);
    -webkit-transition: right 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out;
    transition: right 0.3s ease-in-out;
}

.tab_title {
    height: 100vh;
    width: 40px;
    z-index: 10;
    position: absolute;
    border-left: 4px solid;
}

#spot {
    right: calc(-100vw + 200px);
    background-color:yellow;
}

#rencontres {
    right: calc(-100vw + 160px);
    background-color:red;
}

#shop {
    right: calc(-100vw + 120px);
    background-color:blue;

}

#spot.open {
    right: 80px;
}

#rencontres.open {
    right: 40px;
}

#shop.open {
    right: 0px;
}

和我的 Jquery

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

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


});

这是一个 jsfiddle :

https://jsfiddle.net/1eu2vsd8/

Answer 1

类似下面的代码片段吗？

它检查点击的选项卡是否有 class="open"，然后下一个兄弟是否也有 class="open"(这意味着它不是重点选项卡)。如果它不是焦点选项卡，它会关闭所有以下 sibling ；否则它会自行关闭。

如果它没有 class="open"，那么它会从所有 sibling 中删除该类，然后再将该类添加到自己和所有 previous sibling 姐妹中。

虽然这可能可以使用多个类来清理，和/或应该转换为使用可访问的方法(例如 aria-hidden="true" 和 aria-current="true")，使页面更易于访问技术阅读。

$(".tab").click(function() {
  if ($(this).hasClass('open')) {
    if ($(this).next('.tab').hasClass('open')) {
      $(this).nextAll('.tab').removeClass('open');
    } else {
      $(this).removeClass('open');
    }
  } else {
    $(this).siblings('.tab.open').removeClass('open');
    $(this).addClass('open').prevAll('.tab').addClass('open');
  };
});

.tab {
  min-height: 100vh;
  position: fixed;
  width: calc(100vw - 80px);
  background-color: rgba(255, 255, 255, 1);
  -webkit-transition: right 0.3s ease-in-out;
  -moz-transition: right 0.3s ease-in-out;
  -o-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
}

.tab_title {
  height: 100vh;
  width: 40px;
  z-index: 10;
  position: absolute;
  border-left: 4px solid;
}

#spot {
  right: calc(-100vw + 200px);
  background-color: yellow;
}

#rencontres {
  right: calc(-100vw + 160px);
  background-color: red;
}

#shop {
  right: calc(-100vw + 120px);
  background-color: blue;
}

#spot.open {
  right: 80px;
}

#rencontres.open {
  right: 40px;
}

#shop.open {
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>