javascript - 如何切换 insertBefore 或 InsertAfter？

Question

我有一个选项卡按钮。带有向上的箭头和下方的文字。当您单击该选项卡时。网站标题被隐藏，箭头图标上下颠倒。

我还希望箭头更改其在 html 中的位置。

我可以使用以下脚本很好地完成此任务:

<script>    
    $('.contentTab').on('click', function(e) {
      $('.mainContent').toggleClass("closeHeader");
      $('.triangle-up').toggleClass("triangle-down");
      $(".triangle-down").insertAfter(".contentTab h1")
      e.preventDefault();
    });
</script>

//

我的问题是:如何切换此功能。这样，如果再次单击contentTab。 箭头恢复到原来的位置。我要创建一个 if 语句吗？我对 JS 还很陌生

谢谢!

Answer 1

由于您要切换元素上的类，因此您可以简单地使用 :not() pseudo class如果没有 .triangle-down 类，则选择 .triangle-up:

Example Here

$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");

完整代码片段:

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.triangle-up').toggleClass("triangle-down");
  $(".triangle-down").insertAfter(".contentTab h1");
  $(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
  e.preventDefault();
});

h1 {
  display: inline-block;
}
.triangle-down {
  color: #f00;
  display: inline-block;
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentTab">
  <span class="triangle-up">▲</span>
  <h1>Content tab header</h1>
</div>