代码之家 › 专栏 › 技术社区 › mmdwc

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

accordion css jquery javascript

mmdwc · 技术社区 · 6 年前

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

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

我的问题是,当我所有的标签页都打开时,当我点击第一个标签页(黄色的那个)时,我希望我之前的所有标签页都删除“打开”类,以防止黄色标签页滑到其他标签页下。其他选项卡也一样。

类似于这个例子: https://violaineetjeremy.fr/

我找不到做tab的方法。。。也许用旗子?

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


});

下面是一个JSFIDLE:

https://jsfiddle.net/1eu2vsd8/

1 回复 | 直到 6 年前

Matthew Moore 6 年前

类似下面的片段?

它会检查单击的选项卡是否已关闭 class="open" ,然后下一个兄弟姐妹是否 class=“打开” 同样(这意味着它不是焦点标签)。如果不是焦点选项卡,则关闭以下所有同级;否则它会自动关闭。

如果没有 class=“打开” ,然后从所有同级中删除该类,然后再将该类添加到自身和所有以前的同级中。

虽然这可能可以使用多个类来清理,和/或应该转换为使用可访问的方法(例如。 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>