javascript - jquery手风琴式页面标签导航

Question

我的网站上有 3 个标签 div，采用垂直手风琴式导航。当我单击一个选项卡时，选项卡将类别更改为“打开”、出现在我的页面上或消失。

当我单击第二个或第三个选项卡时，所有以前的选项卡都使用 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/

标签： javascriptjquerycssaccordion

Answer 1

像下面这个片段？

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

如果没有class="open"，则从所有兄弟姐妹中删除该类，然后将该类添加到自身和所有先前的兄弟姐妹中。

尽管这可能可以使用多个类进行清理，和/或应该转换为使用可访问的方法（例如aria-hidden="true"and 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>