如何切换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

因为要在元素上切换一个类，所以如果没有.triangle-down类，则可以简单地使用:not()伪类来选择.triangle-up ：

这里的例子

$(".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> 

Answer 2

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.triangle-up').toggleClass("triangle-down");

  if(!$('.triangle-up').hasClass("triangle-down")){
      $(".triangle-down").insertAfter(".contentTab h1");
  }else{
      // put it back wherever it was before
      $(".triangle-down").insertAfter(...where ever it was before..);
  }
  e.preventDefault();
});

Answer 3

<script>    
    $('.contentTab').on('click', function(e) {
        $('.mainContent').toggleClass("closeHeader");
        if ($('.mainContent').hasClass("closeHeader")){
            $('.triangle-up').hide();
            $(".triangle-down").show();
        }else {
            $('.triangle-up').show();
            $(".triangle-down").hide();
        }
        e.preventDefault();
    });
</script>

前提是.triangle-up和.triangle-down是两个元素。