Question

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

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

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

我找不到制表符的方法...可能使用标志吗？

这是我的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"（这意味着它不是焦点选项卡）。如果不是焦点选项卡，它将关闭以下所有同级；否则它会自行关闭。

如果没有class="open"，则将其从所有同级中删除，然后再将其添加到自身和所有以前的同级中。

尽管可以使用多个类清除它，并且/或者应该使用可访问的方法（例如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>

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

1 个答案: